Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/toolwind/anchors/llms.txt

Use this file to discover all available pages before exploring further.

Every time you use anchored/{name} to attach a floating element to a named anchor, the plugin automatically assigns a view-transition-name to that element. This means you can animate position changes — such as moving a tooltip from one side of an anchor to another — using the browser-native View Transitions API without any additional configuration or animation library.
This feature uses the View Transitions API, a browser-native web platform feature. It is not a custom animation system provided by this plugin.

​
How it works

When you write anchored/my-btn, the plugin generates the following CSS: 
.anchored\/my-btn {
  position-anchor: --tw-anchor_my-btn;
}

.anchored\/my-btn:where(.anchored\/my-btn) {
  position: absolute;
  view-transition-name: --tw-anchor-view-transition-313d192p322r2w3336;
}
The view-transition-name value is derived by encoding the anchor name using a base-36 character code scheme. The encoding is deterministic — the same anchor name always produces the same view-transition-name — so it remains stable across re-renders and server-rendered pages. The view-transition-name is set inside a :where() selector, which has zero specificity. This means any explicit view-transition-name you set yourself will always take precedence.

​
Triggering a position change

Wrap a class change inside document.startViewTransition() to animate the element moving from one position to another: 
const tooltip = document.querySelector('.my-tooltip')

document.startViewTransition(() => {
  tooltip.classList.remove('anchored-top-left')
  tooltip.classList.add('anchored-bottom-right')
})
The browser captures the element’s before and after positions and animates the transition using a smooth cross-fade and movement by default. You can customize the animation further with ::view-transition-old and ::view-transition-new CSS pseudo-elements.

​
Opting out

If you do not want a view-transition-name applied to a particular anchored element, add the Tailwind arbitrary property utility [view-transition-name:none] to the element’s class list: 
<div class="anchored/my-btn anchored-bottom [view-transition-name:none]">
  No transition animation
</div>
Because the plugin’s view-transition-name is set at zero specificity via :where(), the arbitrary utility overrides it without needing !important.

​
Name encoding

The encoded suffix in --tw-anchor-view-transition-{encoded} is produced by converting each character of the anchor name to its base-36 character code and concatenating the results. For example, the anchor name my-btn produces a consistent encoded string each time. This approach keeps view-transition names unique per anchor while avoiding CSS ident restrictions on special characters.
The View Transitions API is primarily supported in Chromium-based browsers (Chrome, Edge, Opera). As of this writing, Firefox has partial support behind a flag and Safari has limited support. Check caniuse.com for current browser coverage before relying on transitions in production.

​
Combining with fallback positioning

When using View Transitions alongside fallback positioning, the browser animates the element even when it transitions between fallback positions. Add try-* utilities to ensure the element repositions gracefully before the animation runs: 
<div class="anchored-bottom-center/my-btn try-flip-y [view-transition-name:--my-tooltip]">
  Animated tooltip
</div>
See Fallback positioning for the full list of try-* utilities.

Fallback positioning

Prevent overflow before animating with position-try fallbacks.

anchored utility

How anchored/ works and what CSS it generates.

Build docs developers (and LLMs) love

Get started for freeTalk to us