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