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:

Using Tailwind CSS animations
Using external libraries
Using the transition property

Use Tailwind CSS animations

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

Go to Project settings -> Experimental 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: 12/05/2023