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
theme of your
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.
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="[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.
There are several options for launching the animation.
Animation on click is a default launching option, so it
does not require any
data-te-animation-start="onHover" to launch the
animation on mouse hover.
data-te-animation-start="onLoad" to start the animation
after loading the page. Refresh your browser to see this effect.
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
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
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 of practical usage of the animation.
Launching via external element
Click or hover the button to launch the animation.