search results:

    • Standard
    • React
    License Free hosting Learn Services Community
    • + D
    • Light
    • Dark
    • System
    logo Tailwind Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Contribute
      • Internationalization guide
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Remix
      • Solid
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • ResourcesNew
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • API

    Animations

    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.

    Required ES init: Animate *
    * UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using Tailwind Elements ES format then you should pass the required components to the initTE method.

    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 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!

    Share via Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via StumbleUpon Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email

    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
            
                
              <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({ Animate, 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
            
                
              <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,
              });
              changeAnimation.init();
              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
            
                
              <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();
                  });
              
            
        

    Related resources

    Tutorials:

    icons hover state focus active and others buttons ripple effect cards sizing

    Extended Docs:

    hover effects icons images buttons gallery list group spinners ripple hero icons icons

    Design System (Figma):

    introduction content should be the star less is more user experience do not start with the roof project personality design system plan the process principles tips and tricks
    • Introduction
    • Basic example
    • Launch options
    • Examples

    Animations - API


    Import

    Importing components depends on how your application works. If you intend to use the Tailwind Elements ES format, you must first import the component and then initialize it with the initTE method. If you are going to use the UMD format, just import the tw-elements package.

    • javascript
    • umd
            
                
            import { Animate, initTE } from "tw-elements";
            initTE({ Animate });
            
            
        
            
                
            import "tw-elements";
            
            
        

    Usage

    Via data attributes

    Elements with the data-te-animation-init attribute will be automatically initialized - you can set all available options with data attributes. For ES format, you must first import and call the initTE method.

    • HTML
            
                
            <div
              data-te-animation-init
              data-te-animation-start="onHover"
              data-te-animation-reset="true"
              data-te-animation="[fade-in_1s_ease-in-out]">
              fadeIn
            </div>
            
            
        

    Via JavaScript

    You can access an instance from your Javascript code, by using the getInstance static method of the Animate class - it allows making use of all the public methods listed in the Methods section.

    • javascript
    • umd
            
                
              const element = document.getElementById('example');
              new Animate(element, {
                animation: "[fade-in_1s_ease-in-out]",
                animationReset: true,
                animationStart: "onHover",
              });
            
            
        
            
                
            const element = document.getElementById('example');
            new te.Animate(element, {
              animation: "[fade-in_1s_ease-in-out]",
              animationReset: true,
              animationStart: "onHover",
            });
            
            
        

    Options

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-te-, as in data-te-animation="[fade-in_1s_ease-in-out]".

    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.

    Methods

    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()
    • javascript
    • umd
            
                
                const animateEl = document.getElementById('animate');
                const animate  = new Animate(manuallyEl, {
                  animation: 'fade-in',
                  animationStart: 'manually',
                });
                animate.startAnimation();          
              
            
        
            
                
                const animateEl = document.getElementById('animate');
                const animate  = new te.Animate(manuallyEl, {
                  animation: 'fade-in',
                  animationStart: 'manually',
                });
                animate.startAnimation();          
              
            
        

    Callbacks

    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.
    • javascript
    • umd
            
                
                  const animateEl = document.getElementById('animate');
                  const animate  = new Animate(manuallyEl, {
                    animation: 'fade-in',
                    onStart: () => {
                      // do something.
                    }
                  });
                  animate.init();
                
            
        
            
                
                  const animateEl = document.getElementById('animate');
                  const animate  = new te.Animate(manuallyEl, {
                    animation: 'fade-in',
                    onStart: () => {
                      // do something.
                    }
                  });
                  animate.init();
                
            
        
    • Import
    • Usage
    • Options
    • Methods
    • Callbacks
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com