Move the mouse over the squares below to launch the animation.
Important: If you want to use one of the animations above
you got to add their name in object safelist in
theme of your tailwind.config.js.
For example:
safelist: ['animate-[fade-in_1s_ease-in-out]',
'animate-[fade-in-down_1s_ease-in-out]'].
To delve into a more detailed exploration of extended animations, we recommend directing your attention to the Animations Extended documentation. This resource provides a thorough overview and in-depth insights into the various extended animation options available, empowering you to create engaging and dynamic visual experiences for your web projects.
Basic example
The easiest way to implement the animation is to use data-te-attributes.
In the example below, we use the simple svg and add the attributes
data-te-animation-init,
data-te-animation-reset="true",
data-te-animation="[slide-right_1s_ease-in-out]" to give it
animation on click.
-
data-te-animation-initis an obligatory attribute for each animation. -
data-te-animation-reset="true"lets you decide if the animation can be repeated -
data-te-animation="[slide-right_1s_ease-in-out]"lets you specify which animation apply to the element. In the demo section above you can find available animations.
Click the airplane to start the animation.
Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!
Launch options
There are several options for launching the animation.
On click
Animation on click is a default launching option, so it
does not require any data-te-attribute.
On hover
Use data-te-animation-start="onHover" to launch the
animation on mouse hover.
On Load
Use data-te-animation-start="onLoad" to start the animation
after loading the page. Refresh your browser to see this effect.
Manually
Use data-te-animation-start="manually" to initialize the
component without animating, adding hover, clicking or scrolling events
and use the animationStart method when you want to start
the animation.
On scroll
Use data-te-animation-start="onScroll" to launch the
animation when you scroll the page and reach the element.
Notice that the animation will launch only once - even if you reach it when scrolling multiple times.
Repeat animation on scroll
If you want to launch the animation every time it's reached when
scrolling use
data-te-animation-on-scroll="repeat".
Show on load
If you use animation onScroll, by default all elements are
visible when the page is loaded. They disappear and begin to animate
after the first scroll. You can change this by setting
data-te-animation-show-on-load="false". However, remember
that this may have a negative impact on SEO.
Examples
Examples of practical usage of the animation.
Launching via external element
Click or hover the button to launch the animation.
