Tailwind CSS Animation

Getting started

Setup

Unlock a suite of pre-built animation classes by integrating tailwindcss-motion with FlyonUI. Follow these simple steps to get started:

1
Installation
Install tailwindcss-motion using npm:
npm i -d tailwindcss-motion

Configure Tailwind

Update your tailwind.config.js file to include the plugin:

// tailwind.config.js
export default {
  theme: {
    extend: {},
  },
  plugins: [require('tailwindcss-motion')],
};

Basic Example

Below is a basic implementation showcasing various motion presets provided by tailwindcss-motion.

<div class="flex w-full items-center justify-around max-sm:flex-col-reverse sm:gap-8">
  <ul class="divide-base-content/25 bg-base-100 vertical-scrollbar h-80 w-64 divide-y rounded-sm shadow *:*:rounded-none max-sm:h-48" >
    <li><button class="dropdown-item animation-button" value="motion-preset-fade">Fade</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-slide-right">Slide</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-focus">Focus</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-blur-right">Blur</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-expand">Expand</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-shrink">Shrink</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-pop">Pop</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-shake">Shake</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-bounce">Bounce</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-confetti">Confetti</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-flomoji-🚀">Flomoji</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-compress">Compress</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-pulse">Pulse</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-wobble">Wobble</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-seesaw">Seesaw</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-oscillate">Oscillate</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-stretch">Stretch</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-float">Float</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-spin">Spin</button></li>
    <li><button class="dropdown-item animation-button" value="motion-preset-blink">Blink</button></li>
    <li>
      <a class="dropdown-item link link-hover link-primary group justify-between" href="https://rombo.co/tailwind/" target="_blank" >
        More Animations
        <span class="icon-[tabler--chevron-right] -mb-0.5 size-4 group-hover:translate-x-1 rtl:rotate-180"></span>
      </a>
    </li>
  </ul>

  <div id="animated-box" class="mx-auto self-center">
    <div class="stats">
      <div class="stat">
        <div class="stat-figure">
          <div class="avatar">
            <div class="size-12 rounded-full">
              <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="User Avatar" />
            </div>
          </div>
        </div>
        <div class="stat-title">Total page views</div>
        <div class="stat-value">89,400</div>
        <div class="stat-desc">21% ↗︎ than last month</div>
      </div>
    </div>
  </div>
</div>

<script>
  window.addEventListener('load', function () {
    const animationButtons = document.querySelectorAll('.animation-button')
    const box = document.getElementById('animated-box')

    animationButtons.forEach(button => {
      button.addEventListener('click', () => {
        const animationClass = button.value

        // Remove all existing motion- classes
        const currentClasses = Array.from(box.classList)
        const motionClasses = currentClasses.filter(className => className.startsWith('motion-'))
        motionClasses.forEach(className => box.classList.remove(className))

        // Temporarily remove the animation class to re-trigger it
        void box.offsetWidth // Trigger reflow to allow re-adding the class
        box.classList.add(animationClass, 'motion-duration-1000')
      })
    })
  })
</script>

To create your own custom animation, you can refer

Illustration

Animated avatar group

Demonstrates animated avatar groups using the tailwindcss-motion plugin.

<div class="avatar-group -space-x-5 rtl:space-x-reverse">
  <div class="avatar hover:motion-scale-out-110 motion-ease-spring-smooth hover:z-30">
    <div class="w-13">
      <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
    </div>
  </div>
  <div class="avatar hover:motion-scale-out-110 motion-ease-spring-smooth hover:z-30">
    <div class="w-13">
      <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-12.png" alt="avatar" />
    </div>
  </div>
  <div class="avatar hover:motion-scale-out-110 motion-ease-spring-smooth hover:z-30">
    <div class="w-13">
      <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-10.png" alt="avatar" />
    </div>
  </div>
  <div class="avatar hover:motion-scale-out-110 motion-ease-spring-smooth hover:z-30">
    <div class="w-13">
      <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-6.png" alt="avatar" />
    </div>
  </div>
</div>

Animated button

Here are examples of interactive buttons with unique motion effects designed with the tailwindcss-motion plugin.

<button class="btn btn-primary active:motion-preset-confetti motion-duration-700">Celebrate!</button>

<button class="btn btn-square btn-text btn-error *:active:motion-preset-shake" aria-label="Soft Icon Button">
  <span class="icon-[tabler--bell-ringing] motion-duration-500 size-6"></span>
</button>

Animated Cards

This is an example of how to use the tailwindcss-motion plugin to create animated card designs.

<div class="flex flex-col gap-6">
  <button id="show-card-animation" class="btn btn-primary w-max">Show Animation</button>

  <div class="card sm:max-w-sm origin-bottom-right motion-scale-in-0 motion-opacity-in-0' motion-blur-in-[5px] motion-ease-spring-spring">
    <figure><img src="https://cdn.flyonui.com/fy-assets/components/card/image-7.png" alt="headphone" /></figure>
    <div class="card-body">
      <h5 class="card-title mb-2.5">Airpods Max</h5>
      <p class="mb-4">A perfect balance of exhilarating high-fidelity audio and the effortless magic of Airpods.</p>
      <div class="card-actions">
        <button class="btn btn-primary motion-delay-[400ms] motion-ease-spring-bouncy motion-scale-in-0">Buy Now</button>
        <button class="btn btn-secondary btn-soft motion-delay-[500ms] motion-ease-spring-bouncy motion-scale-in-0">Add to cart</button>
      </div>
    </div>
  </div>
</div>

Animated List

Here’s an example illustrating the use of the tailwindcss-motion plugin to design a smoothly animated list.

<button id="show-list-animation" class="btn btn-primary w-max">Show Animation</button>

<ul class="flex w-96 flex-col gap-2 rounded-md *:rounded-md *:p-3 *:shadow">
  <li class="bg-base-100 motion-scale-in-0 motion-opacity-in-0 origin-top">
    <div class="flex w-full items-center gap-2">
      <span class="icon-[tabler--brand-whatsapp] text-success size-6"></span>
      New Message(13)
    </div>
  </li>
  <li class="origin-to motion-delay-[500ms] bg-base-100 motion-scale-in-0 motion-opacity-in-0">
    <div class="flex w-full items-center gap-2">
      <span class="icon-[tabler--brand-uber] text-base-content size-6"></span>
      Your ride is waiting outside
    </div>
  </li>
  <li class="origin-to motion-delay-[1000ms] bg-base-100 motion-scale-in-0 motion-opacity-in-0">
    <div class="flex w-full items-center gap-2">
      <span class="icon-[tabler--brand-amazon] text-warning size-6"></span>
      You forget something in your cart
    </div>
  </li>
  <li class="origin-to motion-delay-[1500ms] bg-base-100 motion-scale-in-0 motion-opacity-in-0">
    <div class="flex w-full items-center gap-2">
      <span class="icon-[tabler--brand-netflix] text-error size-6"></span>
      New series just dropped
    </div>
  </li>
</ul>

Animate your pages seamlessly

Bring your pages to life with smooth animations and dynamic transitions using the tailwindcss-motion plugin.

<button id="show-page-animation" class="btn btn-primary w-max">Show Animation</button>

<div class="flex gap-6 flex-wrap">
  <div class="stats max-sm:w-full motion-preset-slide-left motion-ease-spring-bouncier">
    <div class="stat">
      <div class="avatar placeholder">
        <div class="bg-success/20 text-success size-10 rounded-full">
          <span class="icon-[tabler--package] size-6"></span>
        </div>
      </div>
      <div class="stat-value mb-1">Order</div>
      <div class="stat-title">7,500 of 10,000 orders</div>
      <div class="progress bg-success/10 h-2" role="progressbar" aria-label="Order Progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar progress-success w-3/4"></div>
      </div>
    </div>
  </div>

  <div class="stats max-sm:w-full motion-preset-slide-left motion-delay-[400ms] motion-ease-spring-bouncier">
    <div class="stat">
      <div class="avatar placeholder">
        <div class="bg-warning/20 text-warning size-10 rounded-full">
          <span class="icon-[tabler--cash] size-6"></span>
        </div>
      </div>
      <div class="stat-value mb-1">Revenue</div>
      <div class="stat-title">$45,000 of $100,000</div>
      <div class="progress bg-warning/10 h-2" role="progressbar" aria-label="Revenue Progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar progress-warning w-2/5"></div>
      </div>
    </div>
  </div>

  <div class="stats max-sm:w-full motion-preset-slide-left motion-delay-[800ms] motion-ease-spring-bouncier">
    <div class="stat">
      <div class="avatar placeholder">
        <div class="bg-error/20 text-error size-10 rounded-full">
          <span class="icon-[tabler--credit-card] size-6"></span>
        </div>
      </div>
      <div class="stat-value mb-1">Invoice</div>
      <div class="stat-title">$18,200 of $25,000</div>
      <div class="progress bg-error/10 h-2" role="progressbar" aria-label="Invoice Progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar progress-error w-[73%]"></div>
      </div>
    </div>
  </div>
</div>

<div>
  <h2 class="text-3xl font-bold motion-preset-blur-left motion-delay-[1600ms] mb-4">Track Your Stats</h2>
  
  <p class="motion-preset-focus motion-delay-[2400ms]">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </p>
</div>