Animation
Toggle

Toggle

Activation

To show/hide and animate nodes we use custom Tailwind CSS variants that react to classes.

Use off:hidden out:pointer-events-none to hide with display: none; the node when not activated or animating.

Alternatively you can use your own custom style, for example off:invisible off:pointer-events-none out:pointer-events-none.

Use absolute top-0 left-0 right-0 on:relative to position the node in absolute mode when not activated.

If you only need to show/hide and animate a node consider using Xt.on and Xt.off instead of using a complex interaction component.

Animation

Use Tailwind CSS to assign animation (e.g. translate, transition-property, transition-duration, transition-timing-function).

Use Tailwind CSS variants off:, group-off:, on:, group-on:, in:, group-in:, out:, group-out: to assign animations.

If you want to animate from starting values different from out: values assign transition to in: and out: variants.

Use Tailwind CSS variants dir-before:, group-dir-before:, group-off-before:, group-on-before:, group-in-before:, group-out-before:, dir-after:, group-dir-after:, group-off-after:, group-on-after:, group-in-after:, group-out-after: to assign animations.

Direction needs multiple mode to work.

For inverse animation you can use also Tailwind CSS variants done:, group-done:. Remember to use data-xt-duration-out="raf" on inverse targets for proper animations.

When you use animations you need to specity the duration of the animation for proper interactions.

You can also set component's default duration instead of specify it on each component with Xt.options.

Xt.options['xt-toggle'] = {
  duration: 500,
}

Duration and Delay

Duration

You can set activation duration with a number of milliseconds or a function executed each time with arguments { current, total, el, self }.

You can also set duration to two requestAnimationFrame with the string raf.

You can also assign duration on single nodes with data-xt-duration="Milliseconds" or data-xt-duration-in="Milliseconds" and data-xt-duration-out="Milliseconds"

Delay

You can set activation delay with a number of milliseconds or a function executed each time with arguments { current, total, el, self }.

You can also set duration to two requestAnimationFrame with the string raf.

You can also assign delay on single nodes with data-xt-delay="Milliseconds" or data-xt-delay-in="Milliseconds" and data-xt-delay-out="Milliseconds"

Different delay for in and out desynchronized the animation use it with caution, prefer a normal delay. on single nodes** with data-xt-delay="Milliseconds" or data-xt-delay-in="Milliseconds" and data-xt-delay-out="Milliseconds"

Queue

The queue option controls sequential activations putting them in a queue, or with false it executes activations instantly.

Queue needs multiple mode to work.

Css Animation

You can use also css animations, just add them with class names .on, .in, .out, .done, .dir-before and .dir-after.

Direction needs multiple mode to work.

Js Animation

You can use also javascript animations, just use drop api.

Direction needs multiple mode to work.

Design Animation

Use .xt-design when you want to animate the design independently from the content, use relative on parent element and on other elements on the same level of .xt-design for fixing z-index issues.

Collapse

Assign options.collapseHeight or options.collapseWidth and overflow-hidden, transition-all on collapse nodes.

On collapse nodes do not to use margin or padding.

You can use also with initial values for height and width.

Use Tailwind CSS to assign size (e.g. max-height).

Just use the class on if you want to automatically open instantly.