How can I add animations to my website?

There are a few ways to animate elements in your projects so that they are more dynamic and interesting. Here are three ways to do it:

Animations tab
Tailwind CSS animations
External libraries
Transition property

Animations tab

The easiest way to animate your project is with our native Animations tab. To animate al element you will first need to select it, then:

Go to the Right panel and scroll to the bottom
Click the + icon on the Animation tab.
Select the animation you want from the dropdown menu
Customize it by adjusting the animation's direction, interation count, ease type, duration and delay.
Check Animate on reveal to play the animation when the element appears in the viewport.

To make an animation play in an endless loop, in the Iteration field add infinite.

Use Tailwind CSS animations

To animate elements in your project using TailwindCSS you will first need to enable this feature.

Go to Project settings -> Advanced features and check Tailwind CSS.

Select the element you want to animate, then go to the Right panel. In the Tailwind section start typing the word “animate”. You will be able to choose from four different animations: spin, ping, bounce and pulse.

You can also add the animations on different states such as hover or active.
For example, to add a spin animation to the hover effect you need to type it like this: hover:animate-pulse

You can learn more about working with TailwindCSS animations right here: https://tailwindcss.com/docs/animation

Use external libraries

Another way to add animations to your project is by using external JS/CSS libraries such as https://animate.style/.

Styles added using external libraries only work after exporting or publishing the project.

To enable a library like animate.style go to Project settings -> Custom code -> Head and add the code in their documentation. In this case it’s:

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

To use the animations you first need to add them as CSS classes in the editor.

Go to the Left panel -> CSS Classes, click the + button and create an empty class with the name of the animation you want.

For example, to make your element bounce you will need to create two classes: animate__animated (will be added to any element you want to animate) and animate__bounce and add them both to your class list.

To add the animation on an element go to the Right panel -> Classes and select animate__animated and animate__bounce from the list.

There are many other animation libraries out there. Feel free to use any of them.

Use the transition property

You can also create simple CSS animations directly in TeleportHQ using only the "transition" property.

“Transition” controls the way in which an element changes from its normal state to a different state such as hover or active.

To make this work, design your element in both normal and alternative state. Then add the transition property on the normal state to control how the element changes.

With transition you can control: duration, delay, timing function and more.

You can learn more about how to use the CSS Transition property right here: https://developer.mozilla.org/en-US/docs/Web/CSS/transition



Finally, if you want to use keyframe animations, go to Project Settings and inject the keyframe there. Then, just create CSS classes that use that specific animation.

To learn more about using Lottie animations in TeleportHQ check out this article.

Updated on: 01/03/2024