search results:

  • Standard
  • React
Pricing Learn Community
  • + D
  • Light
  • Dark
  • System
logo TW Elements
  • Getting started
    • Quick start
    • Dark mode
    • Theming
    • Changelog
  • CommercialNew
    • Pricing
    • License
    • Installation
    • Git & repository
    • Premium Support
  • Integrations
    • Next
  • Content & styles
    • Animations
    • Animations extended
    • Colors
    • Dividers
    • Figures
    • Headings
    • Hover effects
    • Icons
    • Images
    • Mask
    • Shadows
    • Typography
  • Navigation
    • Breadcrumbs
    • Footer
    • Pagination
    • Pills
    • Tabs
  • Components
    • Accordion
    • Alerts
    • Avatar
    • Badges
    • Button group
    • Buttons
    • Cards
    • Carousel
    • Collapse
    • Dropdown
    • Link
    • List group
    • Modal
    • Paragraphs
    • Placeholders
    • Popover
    • Progress
    • Rating
    • Scroll back to top button
    • Social buttons
    • Spinners
    • Timeline
    • Toasts
    • Tooltip
    • Video carousel
  • Forms
    • Checkbox
    • File input
    • Form templates
    • Inputs
    • Login form
    • Radio
    • Range
    • Registration form
    • Search
    • Select
    • Switch
    • Textarea
  • Data
    • Charts
    • Tables
  • Methods
    • Ripple
  • ResourcesNew
    • Playground
    • YouTube Channel
    • Private FB Group
    • Newsletter
    • UI Design course New

Animations extended

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.

Loading...
  • JSX
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!


Related resources

animations hover effects icons images buttons gallery list group spinners ripple
  • Introduction
  • Extended Examples
  • Related Resources
Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
Join our mailing list now
© 2023 Copyright: MDBootstrap.com