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-te-animation attribute, and you're all set to elevate your web content with captivating animations.

For example: data-te-animation="[drop-in_0.5s]"; data-te-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-te-animation-init
          data-te-animation-start="onHover"
          data-te-animation-reset="true"
          data-te-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-te-animation-init
          data-te-animation-start="onHover"
          data-te-animation-reset="true"
          data-te-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-te-animation-init
          data-te-animation-start="onHover"
          data-te-animation-reset="true"
          data-te-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,
          initTE,
        } from "tw-elements";
        
        initTE({ 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 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

Animations Extended

Related resources

Tutorials:

Extended Docs:

Design System (Figma):