Tailwind CSS Animations Extended

Enhance your web design effortlessly with TW elements Animations Extended. Easily integrate captivating animations using Tailwind CSS, turning your projects into engaging visual experiences.

Welcome to the realm of enhanced web dynamics with the TW elements Animations Extended toolkit. Discover a captivating array of seamless animations designed to breathe life into your web projects. This collection features a versatile set of animations including drop-in, drop-out, fly-in variations (up, down, left, right), fly-out variations (up, down, left, right), browse-in, browse-out, browse-out transitions (left, right), as well as attention-grabbing effects like jiggle, flash, shake, and glow.

Note: When you use Animation Extended, you don't need to configure transition timing function – they come preset. Simply provide the animation name and duration in the data-twe-animation attribute, and you're all set to elevate your web content with captivating animations.

For example: data-twe-animation="[drop-in_0.5s]"; data-twe-animation="[browse-out-left_0.5s]"

Also, be sure to explore the primary Animations documentation for further information.

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

drop in

drop out

fly-in

fly-in-up

fly-in-down

fly-in-left

fly-in-right

fly-out

fly-out-up

fly-out-down

fly-out-left

fly-out-right

browse-in

browse-out

browse-out-left

browse-out-right

jiggle

flash

shake

glow

html
javascript

        
            
        <div
          data-twe-animation-init
          data-twe-animation-start="onHover"
          data-twe-animation-reset="true"
          data-twe-animation="[drop-in_0.5s]"
          class="m-[20px] h-[130px] w-[130px] origin-[top_center] bg-[#fbfbfb] pt-10 text-center shadow-[0_2px_10px_0_rgba(0,0,0,0.14)] dark:bg-neutral-600">
          drop in
        </div>

        <div
          data-twe-animation-init
          data-twe-animation-start="onHover"
          data-twe-animation-reset="true"
          data-twe-animation="[fly-in_0.5s]"
          class="m-[20px] h-[130px] w-[130px] bg-[#fbfbfb] pt-10 text-center shadow-[0_2px_10px_0_rgba(0,0,0,0.14)] dark:bg-neutral-600">
          fly-in
        </div>

        <div
          data-twe-animation-init
          data-twe-animation-start="onHover"
          data-twe-animation-reset="true"
          data-twe-animation="[fly-out_0.5s]"
          class="m-[20px] h-[130px] w-[130px] bg-[#fbfbfb] pt-10 text-center shadow-[0_2px_10px_0_rgba(0,0,0,0.14)] dark:bg-neutral-600">
          fly-out
        </div>

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

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-[drop-in_0.5s]', 'animate-[drop-out_0.5s]'].

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Animations Extended

Access restricted

To view this section you must have an active PRO account

Animations Extended

Tailwind CSS Animations Extended

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):