Tailwind CSS Animations

Use Tailwind CSS animations with helper examples for delay, duration, loading, on hover, on scroll, rotate, fade in and out, button click animations & more.

Move the mouse over the squares below to launch the animation.

fadeIn

fadeInDown

fadeInLeft

fadeInRight

fadeInUp

fadeOut

fadeOutDown

fadeOutLeft

fadeOutRight

fadeOutUp

slideInDown

slideInLeft

slideInRight

slideInUp

slideOutDown

slideOutLeft

slideOutRight

slideOutUp

slideDown

slideLeft

slideRight

slideUp

zoomIn

zoomOut

tada

spinnerGrow

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-init is 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.

HTML
javascript

        
            
        <svg
          data-te-animation-init
          data-te-animation-reset="true"
          data-te-animation="[slide-right_1s_ease-in-out]"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="h-11 w-11">
          <path
            d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
        </svg>

        
            
        // Initialization for ES Users
        import {
          Animate,
          initTE,
        } from "tw-elements";
        
        initTE({ Animate });

Hey there 👋 we want to make TW 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!

Share via Reddit Share via StumbleUpon

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.

HTML
javascript

        
            
          <svg
            data-te-animation-init
            data-te-animation-reset="true"
            data-te-animation="[slide-right_1s_ease-in-out]"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="h-11 w-11">
            <path
              d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
          </svg>

        
            
          // Initialization for ES Users
          import {
            Animate,
            initTE,
          } from "tw-elements";
          
          initTE({ Animate });

On hover

Use data-te-animation-start="onHover" to launch the animation on mouse hover.

HTML
javascript

        
            
          <svg
            data-te-animation-init
            data-te-animation-start="onHover"
            data-te-animation-reset="true"
            data-te-animation="[slide-right_1s_ease-in-out]"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="h-11 w-11">
            <path
              d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
          </svg>

        
            
          // Initialization for ES Users
          import {
            Animate,
            initTE,
          } from "tw-elements";
          
          initTE({ Animate });

On Load

Use data-te-animation-start="onLoad" to start the animation after loading the page. Refresh your browser to see this effect.

HTML
javascript

        
            
          <svg
            data-te-animation-init
            data-te-animation-start="onLoad"
            data-te-animation-reset="true"
            data-te-animation="[slide-right_1s_ease-in-out]"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="h-11 w-11">
            <path
              d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
          </svg>

        
            
          // Initialization for ES Users
          import {
            Animate,
            initTE,
          } from "tw-elements";
          
          initTE({ Animate });

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.

HTML
javascript

        
            
          <svg
            data-te-animation-init
            data-te-animation-start="manually"
            data-te-animation-reset="true"
            data-te-animation="[slide-right_1s_ease-in-out]"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="h-11 w-11">
            <path
              d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
          </svg>

        
            
          // Initialization for ES Users
          import {
            Animate,
            initTE,
          } from "tw-elements";
          
          initTE({ Animate });

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.

HTML
javascript

        
            
          <div
            data-te-animation-init
            data-te-animation-start="onScroll"
            data-te-animation="[slide-right_1s_ease-in-out]">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              class="h-11 w-11">
              <path
                d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
            </svg>
          </div>

        
            
          // Initialization for ES Users
          import {
            Animate,
            initTE,
          } from "tw-elements";
          
          initTE({ Animate });

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".

HTML
javascript

        
            
          <div
            data-te-animation-init
            data-te-animation-start="onScroll"
            data-te-animation-on-scroll="repeat"
            data-te-animation-reset="true"
            data-te-animation="[slide-right_1s_ease-in-out]">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              class="h-11 w-11">
              <path
                d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
            </svg>
          </div>

        
            
          // Initialization for ES Users
          import {
            Animate,
            initTE,
          } from "tw-elements";
          
          initTE({ Animate });

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.

HTML
javascript

        
            
          <div
            data-te-animation-init
            data-te-animation-start="onScroll"
            data-te-animation-on-scroll="repeat"
            data-te-animation-show-on-load="false"
            data-te-animation="[slide-right_1s_ease-in-out]">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              class="h-11 w-11">
              <path
                d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
            </svg>
          </div>

        
            
          // Initialization for ES Users
          import {
            Animate,
            initTE,
          } from "tw-elements";
          
          initTE({ Animate });

Examples

Examples of practical usage of the animation.

Launching via external element

Click or hover the button to launch the animation.

HTML
javascript

        
            
          <div class="flex flex-col items-center justify-around md:flex-row">
            <div>
              <button
                type="button"
                data-te-animation-init
                data-te-animation-target="#animate-click"
                data-te-ripple-init
                data-te-ripple-color="light"
                class="rounded bg-[#3b71ca] px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-[#386bc0] hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-[#386bc0] focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-[#3566b6] active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]">
                Animation on Click
              </button>
              <svg
                id="animate-click"
                data-te-animation-init
                data-te-animation-start="onClick"
                data-te-animation-reset="true"
                data-te-animation="[slide-right_1s_ease-in-out]"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                class="ml-2 h-11 w-11">
                <path
                  d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
              </svg>
            </div>
            <div class="flex items-center">
              <button
                data-te-animation-init
                data-te-animation-target="#animate-hover"
                data-te-ripple-init
                data-te-ripple-color="light"
                class="rounded bg-[#3b71ca] px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-[#386bc0] hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-[#386bc0] focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-[#3566b6] active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]">
                Animation on Hover
              </button>
              <svg
                id="animate-hover"
                data-te-animation-init
                data-te-animation-start="onHover"
                data-te-animation-reset="true"
                data-te-animation="[slide-right_1s_ease-in-out]"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                class="ml-2 h-11 w-11">
                <path
                  d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
              </svg>
            </div>
          </div>
        </div>

        
            
        // Initialization for ES Users
        import {
          Animate,
          Ripple,
          initTE,
        } from "tw-elements";
        
        initTE({ Animate, Ripple });

Start animation manually

You can use the animationStart and animationStop methods to start or stop the animation at the right moment

HTML
javascript
umd

ES UMD

        
            
          <svg
            data-te-animation-init
            id="manually-example"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="mr-2 h-11 w-11">
            <path
              d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
          </svg>
          <button
            type="button"
            data-te-animation-init
            data-te-animation-start-ref
            data-te-ripple-init
            data-te-ripple-color="light"
            class="mr-4 rounded bg-[#3b71ca] px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-[#386bc0] hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-[#386bc0] focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-[#3566b6] active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]">
            start
          </button>
          <button
            type="button"
            data-te-animation-init
            data-te-animation-stop-ref
            data-te-ripple-init
            data-te-ripple-color="light"
            class="rounded bg-[#3b71ca] px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-[#386bc0] hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-[#386bc0] focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-[#3566b6] active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]">
            stop
          </button>

        
            
          import {
            Animate,
            Ripple, 
            initTE,
          } from "tw-elements";
          
          initTE({ Ripple });

          const manuallyEl = document.getElementById("manually-example");
          const manuallyBtnStart = document.querySelector(
            "[data-te-animation-start-ref]"
          );
          const manuallyBtnStop = document.querySelector("[data-te-animation-stop-ref]");
          const manually = new Animate(manuallyEl, {
            animation: "pulse",
            animationStart: "manually",
            animationRepeat: true,
          });
          manuallyBtnStart.addEventListener("click", () => {
            manually.startAnimation();
          });
          manuallyBtnStop.addEventListener("click", () => {
            manually.stopAnimation();
          });

        
            
          const manuallyEl = document.getElementById("manually-example");
          const manuallyBtnStart = document.querySelector(
            "[data-te-animation-start-ref]"
          );
          const manuallyBtnStop = document.querySelector("[data-te-animation-stop-ref]");
          const manually = new te.Animate(manuallyEl, {
            animation: "pulse",
            animationStart: "manually",
            animationRepeat: true,
          });
          manuallyBtnStart.addEventListener("click", () => {
            manually.startAnimation();
          });
          manuallyBtnStop.addEventListener("click", () => {
            manually.stopAnimation();
          });

Change animation type

You can change the element's animation type at any time using the changeAnimationType() method.

HTML
javascript
umd

ES UMD

        
            
          <svg
            data-te-animation-init
            id="change-animation-type-example"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="mr-2 h-11 w-11">
            <path
              d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
          </svg>
          <button
            type="button"
            data-te-animation-init
            data-te-animation-change-ref
            data-te-ripple-init
            data-te-ripple-color="light"
            class="ml-4 rounded bg-[#3b71ca] px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-[#386bc0] hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-[#386bc0] focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-[#3566b6] active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]">
            change animation
          </button>

        
            
          import {
            Animate,
            Ripple,
            initTE,
          } from "tw-elements";
          
          initTE({ Animate, Ripple });

          const changeAnimationEl = document.getElementById(
            "change-animation-type-example"
          );
          const changeAnimationBtn = document.querySelector(
            "[data-te-animation-change-ref]"
          );
          let animation = "pulse";
          const changeAnimation = new Animate(changeAnimationEl, {
            animation: animation,
            animationStart: "onLoad",
            animationRepeat: true,
          });
          changeAnimationBtn.addEventListener("click", () => {
            if (animation === "pulse") {
              animation = "spin";
            } else {
              animation = "pulse";
            }
            changeAnimation.stopAnimation();
            changeAnimation.changeAnimationType(animation);
            changeAnimation.startAnimation();
          });

        
            
          const changeAnimationEl = document.getElementById(
            "change-animation-type-example"
          );
          const changeAnimationBtn = document.querySelector(
            "[data-te-animation-change-ref]"
          );
          let animation = "pulse";
          const changeAnimation = new te.Animate(changeAnimationEl, {
            animation: animation,
            animationStart: "onLoad",
            animationRepeat: true,
          });
          changeAnimation.init();
          changeAnimationBtn.addEventListener("click", () => {
            if (animation === "pulse") {
              animation = "spin";
            } else {
              animation = "pulse";
            }
            changeAnimation.stopAnimation();
            changeAnimation.changeAnimationType(animation);
            changeAnimation.startAnimation();
          });

Fading gallery

With animation on scroll you can create an impressive gallery that will appear smoothly step by step.

In the example below, we additionally use data-te-animation-delay attribute on some images to make it appears one by one.

HTML
javascript

        
            
          <div class="grid grid-cols-3 gap-4">
            <img
              data-te-animation-init
              data-te-animation-start="onScroll"
              data-te-animation="[fade-in_1s_ease-in-out]"
              src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
              class="rounded" />
            <img
              data-te-animation-init
              data-te-animation-start="onScroll"
              data-te-animation="[fade-in_1s_ease-in-out]"
              data-te-animation-delay="300"
              src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
              class="rounded" />
            <img
              data-te-animation-init
              data-te-animation-start="onScroll"
              data-te-animation="[fade-in_1s_ease-in-out]"
              data-te-animation-delay="500"
              src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
              class="rounded" />
            <img
              data-te-animation-init
              data-te-animation-start="onScroll"
              data-te-animation="[fade-in_1s_ease-in-out]"
              src="https://tecdn.b-cdn.net/img/new/standard/city/044.webp"
              class="rounded" />
            <img
              data-te-animation-init
              data-te-animation-start="onScroll"
              data-te-animation="[fade-in_1s_ease-in-out]"
              data-te-animation-delay="300"
              src="https://tecdn.b-cdn.net/img/new/standard/city/045.webp"
              class="rounded" />
            <img
              data-te-animation-init
              data-te-animation-start="onScroll"
              data-te-animation="[fade-in_1s_ease-in-out]"
              data-te-animation-delay="500"
              src="https://tecdn.b-cdn.net/img/new/standard/city/046.webp"
              class="rounded" />
          </div>

        
            
          // Initialization for ES Users
          import {
            Animate,
            initTE,
          } from "tw-elements";
          
          initTE({ Animate });

List group

Click "Add" button to add a new item to the list.

An item
A second item
A third item
A fourth item
And a fifth one

HTML
javascript
umd

ES UMD

        
            
          <div class="flex items-start " style="width: 18rem">
            <ul
              data-te-animation-ref
              class="w-96 overflow-hidden rounded-lg border border-neutral-200 bg-white text-neutral-900 dark:bg-neutral-600 dark:text-neutral-200">
              <li
                class="relative w-full border-neutral-200 bg-white px-6 py-2 dark:bg-neutral-600 [&:not(:last-child)]:border-b">
                An item
              </li>
              <li
                class="relative w-full border-neutral-200 bg-white px-6 py-2 dark:bg-neutral-600 [&:not(:last-child)]:border-b">
                A second item
              </li>
              <li
                class="relative w-full border-neutral-200 bg-white px-6 py-2 dark:bg-neutral-600 [&:not(:last-child)]:border-b">
                A third item
              </li>
              <li
                class="relative w-full border-neutral-200 bg-white px-6 py-2 dark:bg-neutral-600 [&:not(:last-child)]:border-b">
                A fourth item
              </li>
              <li
                class="relative w-full border-neutral-200 bg-white px-6 py-2 dark:bg-neutral-600 [&:not(:last-child)]:border-b">
                And a fifth one
              </li>
            </ul>
            <button
              type="button"
              data-te-animation-add-ref
              data-te-ripple-init
              data-te-ripple-color="light"
              class="ml-4 rounded bg-[#3b71ca] px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-[#386bc0] hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-[#386bc0] focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-[#3566b6] active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]">
              add
            </button>
          </div>

        
            
            import {
              Animate,
              Ripple,
              initTE,
            } from "tw-elements";
            
            initTE({ Animate, Ripple });

            let elementNumber = 1;
            const bindRemoveClickEvent = (el) => {
              const element = el;

              element.addEventListener("click", () => {
                const prevElement = element.previousElementSibling
                  ? element.previousElementSibling
                  : element;
                const animation =
                  element === prevElement
                    ? "[fade-out_1s_ease-in-out]"
                    : "[slide-out-up_1s_ease-in-out]";

                prevElement.style.zIndex = "1";

                element.addEventListener("animationend", () => {
                  element.remove();
                  prevElement.style.zIndex = "0";
                });

                element.classList.add(`animate-${animation}`);
              });
            };

            const addNewOption = () => {
              const element = document.querySelector("[data-te-animation-ref]");
              const newElement = document.createElement("li");
              const lastElement = element.lastElementChild || element;
              const animation =
                element === lastElement
                  ? "[fade-in_1s_ease-in-out]"
                  : "[slide-in-down_1s_ease-in-out]";

              newElement.innerText = `element ${elementNumber}`;
              lastElement.style.zIndex = "1";
              newElement.classList.add(
                "px-6",
                "py-2",
                "[&:not(:last-child)]:border-b",
                "border-gray-200",
                "w-full",
                "rounded-t-lg",
                "relative",
                `animate-${animation}`,
                "bg-white",
                "dark:bg-neutral-600"
              );

              newElement.addEventListener("animationend", () => {
                lastElement.style.zIndex = "0";
                newElement.classList.remove(animation);
              });

              bindRemoveClickEvent(newElement);
              element.appendChild(newElement);
              elementNumber += 1;
            };

            document
              .querySelectorAll("[data-te-animation-ref] li")
              .forEach((el) => {
                bindRemoveClickEvent(el);
              });

            document
              .querySelector("[data-te-animation-add-ref]")
              .addEventListener("click", () => {
                addNewOption();
              });

        
            
            let elementNumber = 1;
            const bindRemoveClickEvent = (el) => {
              const element = el;

              element.addEventListener("click", () => {
                const prevElement = element.previousElementSibling
                  ? element.previousElementSibling
                  : element;
                const animation =
                  element === prevElement
                    ? "[fade-out_1s_ease-in-out]"
                    : "[slide-out-up_1s_ease-in-out]";

                prevElement.style.zIndex = "1";

                element.addEventListener("animationend", () => {
                  element.remove();
                  prevElement.style.zIndex = "0";
                });

                element.classList.add(`animate-${animation}`);
              });
            };

            const addNewOption = () => {
              const element = document.querySelector("[data-te-animation-ref]");
              const newElement = document.createElement("li");
              const lastElement = element.lastElementChild || element;
              const animation =
                element === lastElement
                  ? "[fade-in_1s_ease-in-out]"
                  : "[slide-in-down_1s_ease-in-out]";

              newElement.innerText = `element ${elementNumber}`;
              lastElement.style.zIndex = "1";
              newElement.classList.add(
                "px-6",
                "py-2",
                "[&:not(:last-child)]:border-b",
                "border-gray-200",
                "w-full",
                "rounded-t-lg",
                "relative",
                `animate-${animation}`,
                "bg-white",
                "dark:bg-neutral-600"
              );

              newElement.addEventListener("animationend", () => {
                lastElement.style.zIndex = "0";
                newElement.classList.remove(animation);
              });

              bindRemoveClickEvent(newElement);
              element.appendChild(newElement);
              elementNumber += 1;
            };

            document
              .querySelectorAll("[data-te-animation-ref] li")
              .forEach((el) => {
                bindRemoveClickEvent(el);
              });

            document
              .querySelector("[data-te-animation-add-ref]")
              .addEventListener("click", () => {
                addNewOption();
              });

Name	Type	Default	Description
`animation`	string	`'-'`	Sets animation.
`animationStart`	string	`'onClick'`	Set how to run the animation (`onClick`, `onLoad`, `onScroll`, `onHover`, `manually`).
`animationReset`	boolean	`false`	Set to reset the animation after it finishes.
`animationShowOnLoad`	boolean	`true`	Set `false` to start the scrolling animation immediately after the page loads. NOTE: this will hide elements that are not currently visible on the screen and this may have a negative impact on SEO
`animationOnScroll`	string	`'once'`	Set `repeat` to start the animation each time the item appears on the screen.
`onStart`	function	`-`	Callback function fires after start animation.
`onEnd`	function	`-`	Callback function fires after end animation.
`onHide`	function	`-`	Callback function fires after show element.
`onShow`	function	`-`	Callback function fires after hide element.
`animationOffset`	number	`0`	Set offset for animate on scroll.
`animationDelay`	number	`0`	Set animation delay.
`animationReverse`	boolean	`false`	Set true to played animation forwards first, then backwards.
`animationInterval`	number	`0`	Set the time interval between animations.
`animationRepeat`	boolean/number	`false`	Set animation repeat - set `true` to repeat infinity or enter the number of times the animation should repeat.

Method	Description	Example
`dispose`	Destroy animations with this method.	`animation.dispose()`
`getInstance`	Static method which allows you to get the stepper instance associated to a DOM element.	`Animate.getInstance(animateEl)`
`getOrCreateInstance`	Static method which returns the stepper instance associated to a DOM element or create a new one in case it wasn't initialized.	`Animate.getOrCreateInstance(animateEl)`
`startAnimation`	Start animating the element.	`animation.startAnimation()`
`stopAnimation`	Stop animating the element.	`animation.stopAnimation()`
`changeAnimationType`	Change the animation type of an element.	`animation.changeAnimationType()`

Event type	Description
`onStart`	This callback fires before the animation starts.
`onEnd`	This callback starts immediately after the animation has finished..
`onShow`	If you use animate on scroll this callback will start when the element appears on the screen.
`onHide`	If you use animate on scroll this callback will start after the element disappears from the screen.

Animations

Basic example

Launch options

On click

On hover

On Load

Manually

On scroll

Repeat animation on scroll

Show on load

Examples

Launching via external element

Start animation manually

Change animation type

Fading gallery

List group

Animations - API

Import

Usage

Via data attributes

Via JavaScript

Options

Methods

Callbacks

Animations

Tailwind CSS Animations

Basic example

Launch options

On click

On hover

On Load

Manually

On scroll

Repeat animation on scroll

Show on load

Examples

Launching via external element

Start animation manually

Change animation type

Fading gallery

List group

Related resources

Tutorials:

Extended Docs:

Design System (Figma):

Animations - API

Import

Usage

Via data attributes

Via JavaScript

Options

Methods

Callbacks