Tailwind CSS React Animations extended

Enhance your web design effortlessly with TW Elements React 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 React 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 animation property, and you're all set to elevate your web content with captivating animations.

For example: animation="[drop-in_0.5s]"; 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.

import React from "react";
import { TEAnimation } from "tw-elements-react";

export default function AnimationsExtendedAll(): JSX.Element {
  return (
    <div className="flex space-x-2">
      <TEAnimation
        animation="[drop-in_0.5s]"
        start="onHover"
        reset
        className="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"
      >
        drop-in
      </TEAnimation>
      <TEAnimation
        animation="[fly-in_0.5s]"
        start="onHover"
        reset
        className="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
      </TEAnimation>
      <TEAnimation
        animation="[fly-out_0.5s]"
        start="onHover"
        reset
        className="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
      </TEAnimation>
    </div>
  );
}

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 for React 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

Related resources