### Install tailwindcss-motion via npm Source: https://docs.rombo.co/tailwind/installation Use this command to install the plugin using npm. Ensure Tailwind CSS is already installed. ```bash npm i -D tailwindcss-motion ``` -------------------------------- ### Fast Animation Example Source: https://docs.rombo.co/tailwind/modifiers/duration Use a smaller duration value like `motion-duration-100` for quick animations. This example demonstrates a quick fade-in. ```html
Quick fade
``` -------------------------------- ### Install tailwindcss-intersect Plugin Source: https://docs.rombo.co/tailwind/scroll-animations Install the tailwindcss-intersect plugin using npm. ```bash npm install -D tailwindcss-intersect ``` -------------------------------- ### Basic Delay Utility Source: https://docs.rombo.co/tailwind/modifiers/delay Use the `motion-delay-{value}` utility to control when animations start. The value corresponds to the delay in milliseconds. ```html
Delayed fade in
``` -------------------------------- ### Staggered Animation Example Source: https://docs.rombo.co/tailwind/modifiers/delay Create staggered animations by applying different `motion-delay` values to sequential elements. This example shows a fade-in effect with increasing delays. ```html
First item
Second item
Third item
``` -------------------------------- ### Multiple Properties with Delay Source: https://docs.rombo.co/tailwind/modifiers/delay Demonstrates applying delays to multiple animation properties independently. Here, opacity starts immediately while rotation is delayed. ```html
Immediate fade, delayed rotation
``` -------------------------------- ### Apply Rombo Pulse Animation Source: https://docs.rombo.co/tailwind/installation Example of applying a pre-defined pulse animation preset to an HTML element using Rombo's utility classes. ```html
Pulse animation
``` -------------------------------- ### Basic Loop Animation - Translate Y Source: https://docs.rombo.co/tailwind/loop-animations Use the `loop` direction with a base animation to create continuous motion. This example animates vertically. ```html
Continuous up and down motion
``` -------------------------------- ### Multiple Properties with Different Durations Source: https://docs.rombo.co/tailwind/modifiers/duration Apply different durations to multiple properties simultaneously. This example sets a fast fade duration and a slow rotation duration. ```html
Fast fade, slow rotation
``` -------------------------------- ### Apply Enter Animation Preset Source: https://docs.rombo.co/tailwind/presets Add a preset class directly to your HTML element to apply a pre-defined enter animation. This example shows how to apply the 'fade' preset. ```html
Fade in
``` -------------------------------- ### Basic Exit Animation Source: https://docs.rombo.co/tailwind/exit-animations Use the `out` direction with any base animation to create a basic exit animation. This example shows a slide down and fade out effect. ```html
Slide down and fade out
``` -------------------------------- ### Loop Translation Animation Source: https://docs.rombo.co/tailwind/base-animations/translate Create looping translation animations on both the X and Y axes simultaneously. This example loops horizontally by 50% and vertically by 25%. ```html
Loop horizontally and vertically
``` -------------------------------- ### Basic Loop Count Utility Source: https://docs.rombo.co/tailwind/modifiers/loop-count Use the `motion-loop-{value}` utility to set the number of times an animation repeats. This example sets the animation to loop twice. ```html
Loop twice
``` -------------------------------- ### Slow Animation Example with Arbitrary Value Source: https://docs.rombo.co/tailwind/modifiers/duration Use arbitrary values for durations not present in the theme, like `motion-duration-[3s]` for very slow animations. This example shows a very slow fade-in. ```html
Very slow fade
``` -------------------------------- ### Combine Opacity In with Translate Y Source: https://docs.rombo.co/tailwind/base-animations/opacity Opacity animations can be combined with other animation utilities. This example fades an element in while simultaneously sliding it up. ```html
Fade in while sliding up
``` -------------------------------- ### Combining Multiple Exit Animations Source: https://docs.rombo.co/tailwind/exit-animations Stack multiple exit animations to achieve complex visual effects. This example combines slide out, rotation, and blur. ```html
Complex exit animation
``` -------------------------------- ### Combine Multiple Base Animations Source: https://docs.rombo.co/tailwind/base-animations Stack various base animation classes to create complex animation sequences on an element. This example combines opacity, translation, and rotation. ```html
Complex animation!
``` -------------------------------- ### Combined Loop Animations Source: https://docs.rombo.co/tailwind/loop-animations Stack multiple loop animations to achieve complex visual effects. This example combines translation, rotation, and blur. ```html
Complex looping animation
``` -------------------------------- ### Combine Translation with Opacity Animation Source: https://docs.rombo.co/tailwind/base-animations/translate Combine translation animations with other animation types, such as opacity. This example slides an element up while fading it in. ```html
Slide up and fade in
``` -------------------------------- ### Apply Animation Modifiers Source: https://docs.rombo.co/tailwind/modifiers Apply duration, rotation, and opacity modifiers to an element. This example sets a 2000ms duration for both rotation and opacity animations. ```html
``` -------------------------------- ### Apply Duration to Specific Properties Source: https://docs.rombo.co/tailwind/modifiers/duration Apply duration to specific properties using a slash `/`. This example sets a slow rotation duration while keeping the default duration for opacity. ```html
Slow rotation, default duration opacity
``` -------------------------------- ### Apply Modifiers to Specific Properties Source: https://docs.rombo.co/tailwind/modifiers Apply modifiers to specific animation properties using a slash `/`. This example applies a 500ms delay only to the rotation animation. ```html
``` -------------------------------- ### Configure Animation Loop Styles Source: https://docs.rombo.co/tailwind/modifiers Control animation loop behavior with `mirror` (default) or `reset` modifiers. `mirror` reverses the animation, while `reset` returns it to the start. ```html
``` ```html
``` -------------------------------- ### Reset Loop Animation - Translate Y Source: https://docs.rombo.co/tailwind/loop-animations Append `/reset` to a loop animation for an effect where the animation instantly returns to its starting position. ```html
Instant reset motion
``` -------------------------------- ### Basic Modifier Application Source: https://docs.rombo.co/tailwind/applying-modifiers Add modifier classes alongside animation classes to customize animation behavior. This example sets a slow fade-in duration. ```html
Slow fade in
``` -------------------------------- ### Combine Translation with Ease Modifier Source: https://docs.rombo.co/tailwind/base-animations/translate Apply easing modifiers to translation animations. This example makes the element bounce in from below using `motion-ease-bounce`. ```html
Bounce in from below
``` -------------------------------- ### Set Animation Duration Source: https://docs.rombo.co/tailwind/modifiers/duration Use the `motion-duration-{value}` utility to control how long animations take. This example sets a slow fade-in animation. ```html
Slow fade in
``` -------------------------------- ### Combining Multiple Modifiers Source: https://docs.rombo.co/tailwind/applying-modifiers Stack multiple modifiers to achieve complex animation behaviors. This example combines a slide preset with custom duration, delay, and easing. ```html
Complex animation
``` -------------------------------- ### Customizing Exit Animation Duration and Easing Source: https://docs.rombo.co/tailwind/exit-animations Customize exit animations with modifiers like `motion-duration` and `motion-ease`. This example creates a slow, smooth exit animation. ```html
Slow, smooth exit
``` -------------------------------- ### Different Loop Counts for Multiple Properties Source: https://docs.rombo.co/tailwind/modifiers/loop-count Assign distinct loop counts to different animation properties within the same element. This example loops opacity once and rotation twice. ```html
Different loop counts per property
``` -------------------------------- ### Combining Rotation with Delay Modifier Source: https://docs.rombo.co/tailwind/base-animations/rotate Apply animation modifiers like 'motion-delay' to rotation animations to control their timing. This example delays the rotation-in animation. ```html
Rotate in with delay
``` -------------------------------- ### Customized Loop Animation - Slow Smooth Floating Source: https://docs.rombo.co/tailwind/loop-animations Customize loop animations using modifiers for duration and easing. This example creates a slow, smooth floating effect. ```html
Slow, smooth floating
``` -------------------------------- ### Combine Blur In with Duration Modifier Source: https://docs.rombo.co/tailwind/base-animations/blur Customize blur animations by combining them with modifiers like `motion-duration`. This example sets a long duration for the blur-in effect. ```html
Blur with long duration
``` -------------------------------- ### Combining Rotation with Scale Animation Source: https://docs.rombo.co/tailwind/base-animations/rotate Combine rotation animations with other animation types, such as scale, to create complex entry effects. This example rotates and scales the element in simultaneously. ```html
Rotate and scale in
``` -------------------------------- ### Property-Specific Loop Count Source: https://docs.rombo.co/tailwind/modifiers/loop-count Apply loop counts to specific animation properties by using a slash `/` after the loop count modifier. This example applies 'twice' to rotation and '25' to translate-y, while rotate defaults to '180' and translate-y defaults to 'infinite'. ```html
Rotate twice, translate infinitely
``` -------------------------------- ### Apply Expand Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Use the `motion-preset-expand` class to apply an expand entrance animation. ```html
expand
``` -------------------------------- ### Apply Pop Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Use the `motion-preset-pop` class for a pop-in entrance animation. ```html
pop
``` -------------------------------- ### Combine Opacity In with Duration Modifier Source: https://docs.rombo.co/tailwind/base-animations/opacity You can customize animation properties like duration by combining animation classes with modifier classes. This example sets a custom duration for the fade-in effect. ```html
Fade in with duration
``` -------------------------------- ### Customizing Background Color Animation Duration Source: https://docs.rombo.co/tailwind/base-animations/bg-color Adjust the duration of background color transitions using the `motion-duration-[time]` modifier. This example sets a 2-second duration for a red background transition. ```html
Slow color transition
``` -------------------------------- ### Apply Focus Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Use the `motion-preset-focus` class to apply a focus-based entrance animation. Available in small, medium, and large sizes. ```html
focus
``` -------------------------------- ### Apply Compress Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Apply a compress entrance animation using the `motion-preset-compress` class. ```html
compress
``` -------------------------------- ### Apply Shake Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Use the `motion-preset-shake` class to apply a shake entrance animation. ```html
shake
``` -------------------------------- ### Apply Rebound Up Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Apply a rebound-up entrance animation with the `motion-preset-rebound-up` class. ```html
rebound-up
``` -------------------------------- ### Apply Shrink Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Apply a shrink entrance animation with the `motion-preset-shrink` class. ```html
shrink
``` -------------------------------- ### Apply Wiggle Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Apply a wiggle entrance animation with the `motion-preset-wiggle` class. ```html
wiggle
``` -------------------------------- ### Apply Bounce Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Apply a bounce entrance animation using the `motion-preset-bounce` class. ```html
bounce
``` -------------------------------- ### Apply Blur Up Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Apply a blur-up entrance animation with the `motion-preset-blur-up` class. Available in small, medium, and large sizes. ```html
blur-up
``` -------------------------------- ### Apply Slide Up Left Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Apply a slide-up and left entrance animation using the `motion-preset-slide-up-left` class. Supports small, medium, and large variants. ```html
slide-up-left
``` -------------------------------- ### Apply Slide Up Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Apply a slide-up entrance animation using the `motion-preset-slide-up` class. Available in small, medium, and large variants. ```html
slide-up
``` -------------------------------- ### Apply Rebound Down Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Use the `motion-preset-rebound-down` class for a rebound-down entrance animation. ```html
rebound-down
``` -------------------------------- ### Combine Enter Animations Source: https://docs.rombo.co/tailwind/enter-animations Combine multiple enter base animations to create entrance effects like fading in, sliding up, and unblurring. ```html
Fade in, slide up, and unblur
``` -------------------------------- ### Apply Blur Down Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Use the `motion-preset-blur-down` class for a blur-down entrance animation. Available in small, medium, and large sizes. ```html
blur-down
``` -------------------------------- ### Apply Slide Down Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Apply a slide-down entrance animation with the `motion-preset-slide-down` class. Available in small, medium, and large sizes. ```html
slide-down
``` -------------------------------- ### Basic Enter Animation Source: https://docs.rombo.co/tailwind/enter-animations Use a base animation with the 'in' direction to create a simple slide-up effect on enter. ```html
Slide up on enter
``` -------------------------------- ### Multiple Properties with Different Easing Source: https://docs.rombo.co/tailwind/modifiers/ease Apply linear easing to opacity and spring easing to rotation simultaneously. This demonstrates applying distinct easing functions to multiple properties on a single element. ```html
Linear fade, bouncy rotation
``` -------------------------------- ### Apply Confetti Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Use the `motion-preset-confetti` class for a confetti entrance animation. ```html
confetti
``` -------------------------------- ### Apply Slide Down Right Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Apply a slide-down and right entrance animation with the `motion-preset-slide-down-right` class. Available in small, medium, and large sizes. ```html
slide-down-right
``` -------------------------------- ### Wrap App with ObserverProvider Source: https://docs.rombo.co/tailwind/scroll-animations Wrap your main application component with ObserverProvider to enable scroll animations. ```typescript import ObserverProvider from './ObserverProvider'; function App() { return ( ); } ``` -------------------------------- ### Apply Rebound Left Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Use the `motion-preset-rebound-left` class for a rebound animation from the left. ```html
rebound-left
``` -------------------------------- ### Apply Slide Right Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Use the `motion-preset-slide-right` class for a slide-in animation from the right. Sizes include small, medium, and large. ```html
slide-right
``` -------------------------------- ### Apply Slide Down Left Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Use the `motion-preset-slide-down-left` class for a slide-down and left entrance animation. Available in small, medium, and large sizes. ```html
slide-down-left
``` -------------------------------- ### Apply Slide Left Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Use the `motion-preset-slide-left` class to apply a slide-in animation from the left. Supports small, medium, and large sizes. ```html
slide-left
``` -------------------------------- ### Apply Rebound Right Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Apply a rebound animation from the right using the `motion-preset-rebound-right` class. ```html
rebound-right
``` -------------------------------- ### Basic Easing Usage Source: https://docs.rombo.co/tailwind/modifiers/ease Apply a bouncy easing effect to a translation animation using the `motion-ease-bounce` utility. ```html
Bouncy translation
``` -------------------------------- ### Looping Background Color Animation Source: https://docs.rombo.co/tailwind/base-animations/bg-color Employ `motion-bg-loop-[color]` for continuous background color looping animations. ```html
Loop colors
``` -------------------------------- ### Loop Scale Animation Source: https://docs.rombo.co/tailwind/base-animations/scale Create a looping scale animation. Use values from 0 to 150% or arbitrary values. ```html
Loop scale
``` -------------------------------- ### Basic Scale In Animation Source: https://docs.rombo.co/tailwind/base-animations/scale Apply a basic scale-in animation to an element. Use values from 0 to 150% or arbitrary values. ```html
Scale in
``` -------------------------------- ### Basic Background Color Animation Source: https://docs.rombo.co/tailwind/base-animations/bg-color Use `motion-bg-in-[color]` to animate the background color. Supports Tailwind default colors, theme colors, and arbitrary values. ```html
Fade from red
``` -------------------------------- ### Mirror Loop Animation - Translate Y Source: https://docs.rombo.co/tailwind/loop-animations Add `/mirror` to a loop animation to create a back-and-forth effect that reverses direction. ```html
Back-and-forth motion
``` -------------------------------- ### Apply Blur Left Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Use the `motion-preset-blur-left` class for a blur-in animation from the left. Available in small, medium, and large sizes. ```html
blur-left
``` -------------------------------- ### Spinner Animation with Customization Source: https://docs.rombo.co/tailwind/base-animations/rotate Implement a spinner animation by combining 'motion-rotate-loop' with an arbitrary turn value and 'motion-ease-linear' for a smooth, continuous spin. ```html
Spinner
``` -------------------------------- ### Add Rombo plugin to Tailwind config Source: https://docs.rombo.co/tailwind/installation Configure your `tailwind.config.js` file to include the `tailwindcss-motion` plugin. This enables Rombo's animation presets. ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [...], theme: { extend: {...}, }, plugins: [require('tailwindcss-motion')], }; ``` -------------------------------- ### Apply Fade In Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Use the `motion-preset-fade` class to apply a fade-in animation. Available in small, medium, and large sizes. ```html
fade
``` -------------------------------- ### Spinner Animation with Reset Loop Source: https://docs.rombo.co/tailwind/loop-animations Use `/reset` with a rotation loop to create a continuous spinner effect. Combining with `motion-ease-linear` ensures constant speed. ```html
``` -------------------------------- ### Custom Enter Animation with Modifiers Source: https://docs.rombo.co/tailwind/enter-animations Customize enter animations using modifiers like duration and easing for a slow, smooth entrance effect. ```html
Slow, smooth entrance
``` -------------------------------- ### Basic Text Color Animation Source: https://docs.rombo.co/tailwind/base-animations/text-color Use `motion-text-in-{color}` to animate text color transitions. Supports Tailwind default colors, theme colors, and arbitrary values. ```html
Fade from red
``` -------------------------------- ### Complex Combined Enter Animation Source: https://docs.rombo.co/tailwind/enter-animations Stack multiple enter animations, such as slide, rotate, and blur, to create a complex entrance animation. ```html
Complex entrance animation
``` -------------------------------- ### Combine Text Color with Scale Animation Source: https://docs.rombo.co/tailwind/base-animations/text-color Combine text color animations with other Rombo animations like scale by applying multiple utility classes. ```html
Text color and scale
``` -------------------------------- ### Spring Animation Easing Source: https://docs.rombo.co/tailwind/modifiers/ease Use a spring-like easing function for a scale-in animation to create a more natural, bouncy effect. ```html
Spring scale
``` -------------------------------- ### Basic Translation Animation Source: https://docs.rombo.co/tailwind/base-animations/translate Use the `motion-translate-y-in-100` class to make an element slide up from its default position. ```html
Slide up
``` -------------------------------- ### Apply Blur Right Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Apply a blur-in animation from the right using the `motion-preset-blur-right` class. Supports small, medium, and large variants. ```html
blur-right
``` -------------------------------- ### Basic Blur In Animation Source: https://docs.rombo.co/tailwind/base-animations/blur Apply a standard blur-in effect to an element. Use classes like `motion-blur-in-md` for different blur intensities. ```html
Blur in
``` -------------------------------- ### Loop Opacity Animation Source: https://docs.rombo.co/tailwind/base-animations/opacity Apply a looping opacity animation using the `motion-opacity-loop-*` classes. This class will continuously cycle the opacity of the element. ```html
Loop opacity
``` -------------------------------- ### Combine Blur In with Opacity In Source: https://docs.rombo.co/tailwind/base-animations/blur Combine blur-in animations with other animation types, such as opacity-in, by applying multiple animation classes to a single element. ```html
Blur and fade in
``` -------------------------------- ### Exit Background Color Animation Source: https://docs.rombo.co/tailwind/base-animations/bg-color Utilize `motion-bg-out-[color]` to apply background color animations during element exit. ```html
Exit animation
``` -------------------------------- ### Spin Animation Preset Source: https://docs.rombo.co/tailwind/presets/loop Applies a spin animation effect. ```html
spin
``` -------------------------------- ### Blink Animation Preset Source: https://docs.rombo.co/tailwind/presets/loop Applies a blink animation effect. ```html
blink
``` -------------------------------- ### Seesaw Animation Preset Source: https://docs.rombo.co/tailwind/presets/loop Applies a seesaw animation effect. Available in small, medium, and large sizes. ```html
seesaw
``` -------------------------------- ### Combine Scale and Opacity Animations Source: https://docs.rombo.co/tailwind/base-animations/scale Combine scale-in animations with other animation types like opacity-in for complex effects. ```html
Scale and fade in
``` -------------------------------- ### Wobble Animation Preset Source: https://docs.rombo.co/tailwind/presets/loop Applies a wobble animation effect. Available in small, medium, and large sizes. ```html
wobble
``` -------------------------------- ### Stretch Animation Preset Source: https://docs.rombo.co/tailwind/presets/loop Applies a stretch animation effect. Available in small, medium, and large sizes. ```html
stretch
``` -------------------------------- ### Apply Slide Up Right Animation Preset Source: https://docs.rombo.co/tailwind/presets/enter Use the `motion-preset-slide-up-right` class for an animation that slides up and to the right. Available in small, medium, and large sizes. ```html
slide-up-right
``` -------------------------------- ### Combine Scale Animation with Easing Modifiers Source: https://docs.rombo.co/tailwind/base-animations/scale Apply custom easing functions, such as spring animations, to scale animations. ```html
Scale in with spring
``` -------------------------------- ### Combine Opacity and Translation Animations Source: https://docs.rombo.co/tailwind/base-animations Use multiple base animation classes on a single element to achieve combined effects like fading in and sliding up simultaneously. ```html
fade in and slide in from below!
``` -------------------------------- ### Basic Blur Out Animation Source: https://docs.rombo.co/tailwind/base-animations/blur Apply a standard blur-out effect to an element. Use classes like `motion-blur-out-md` for different blur intensities. ```html
Blur out
``` -------------------------------- ### Looping Text Color Animation Source: https://docs.rombo.co/tailwind/base-animations/text-color Animate text colors in a loop using `motion-text-loop-{color}`. Note: This feature may not work as expected. ```html
Loop colors
``` -------------------------------- ### Custom Cubic Bezier Easing Source: https://docs.rombo.co/tailwind/modifiers/ease Apply a custom easing curve defined by cubic-bezier values to a fade preset animation. ```html
Custom easing curve
``` -------------------------------- ### Looping Blur Animation Source: https://docs.rombo.co/tailwind/base-animations/blur Create a pulsing or looping blur effect on an element using the `motion-blur-loop-*` classes. ```html
Looping blur
``` -------------------------------- ### Grayscale Loop Animation Source: https://docs.rombo.co/tailwind/base-animations/grayscale Use this class to create a looping grayscale effect on an element. This is ideal for elements that should continuously cycle through grayscale states. ```html
Loop grayscale effect
``` -------------------------------- ### Combining Background Color with Scale Animation Source: https://docs.rombo.co/tailwind/base-animations/bg-color Background color animations can be combined with other Rombo animations, such as scale animations, by including multiple utility classes. ```html
Background and scale
``` -------------------------------- ### Control Animation Play State Source: https://docs.rombo.co/tailwind/modifiers Use `motion-paused` to pause an animation and `motion-running` to resume it. Ensure the base animation preset is applied. ```html
``` ```html
``` -------------------------------- ### Applying Modifiers to Specific Properties Source: https://docs.rombo.co/tailwind/applying-modifiers Target specific properties using a slash (/) followed by the property name. This applies the delay only to the rotation animation. ```html
Delayed rotation
``` -------------------------------- ### Property-Specific Delay Source: https://docs.rombo.co/tailwind/modifiers/delay Apply delay to specific animation properties using a slash `/` notation. This allows for independent delay control over different animation aspects. ```html
Delayed rotation, immediate opacity
``` -------------------------------- ### Pulse Animation Preset Source: https://docs.rombo.co/tailwind/presets/loop Applies a pulse animation effect. Available in small, medium, and large sizes. ```html
pulse
``` -------------------------------- ### Basic Grayscale In Animation Source: https://docs.rombo.co/tailwind/base-animations/grayscale Apply this class to fade an element to grayscale. This is useful for visual effects where you want an element to lose its color. ```html
Fade to grayscale
``` -------------------------------- ### Fade In Opacity Animation Source: https://docs.rombo.co/tailwind/base-animations/opacity Use the `motion-opacity-in-*` classes to fade an element in. The `motion-opacity-in-0` class provides a very low opacity, while `motion-opacity-in-100` sets it to fully opaque. ```html
Fade in
``` -------------------------------- ### Custom Delay Value Source: https://docs.rombo.co/tailwind/modifiers/delay Use arbitrary values within square brackets `[]` to specify custom delay durations in milliseconds for animations. ```html
Long delay
``` -------------------------------- ### Scale Out Animation Source: https://docs.rombo.co/tailwind/base-animations/scale Apply a scale-out animation to an element. Use values from 0 to 150% or arbitrary values. ```html
Scale out
``` -------------------------------- ### Float Animation Preset Source: https://docs.rombo.co/tailwind/presets/loop Applies a float animation effect. Available in small, medium, and large sizes. ```html
float
``` -------------------------------- ### Add Delay to Fade Preset Source: https://docs.rombo.co/tailwind/presets/customizing Apply a delay to the 'motion-preset-fade' animation using the 'motion-delay-500' class. ```html
``` -------------------------------- ### One-Time Scroll Animation Source: https://docs.rombo.co/tailwind/scroll-animations Use the 'intersect-once' class along with an 'intersect:' animation class to ensure the animation only triggers the first time an element enters the viewport. ```html
Slide up once
``` -------------------------------- ### Basic Rotation In Animation Source: https://docs.rombo.co/tailwind/base-animations/rotate Apply a basic 'rotate-in' animation to an element. This class rotates the element into view. ```html
Rotate in
``` -------------------------------- ### Grayscale Out Animation Source: https://docs.rombo.co/tailwind/base-animations/grayscale Apply this class to animate an element out of its grayscale state. This is useful for revealing elements or transitioning them back to their original colors. ```html
Exit to grayscale
``` -------------------------------- ### Arbitrary Values for Modifiers Source: https://docs.rombo.co/tailwind/applying-modifiers Most modifiers support arbitrary values using square brackets. This allows for custom durations and easing functions. ```html
Custom timing
``` -------------------------------- ### Combined Scroll Animations Source: https://docs.rombo.co/tailwind/scroll-animations Combine multiple Rombo animation classes with the 'intersect:' prefix on a single element to create complex scroll-triggered animations. ```html
Complex scroll animation
``` -------------------------------- ### Combine Grayscale with Modifiers Source: https://docs.rombo.co/tailwind/base-animations/grayscale Apply modifiers like duration to control the speed of grayscale transitions. This allows for fine-tuning the animation's pacing to match your design. ```html
Slow grayscale transition
``` -------------------------------- ### Staggered List Items Animation Source: https://docs.rombo.co/tailwind/scroll-animations Create a staggered scroll animation effect for a list of items by applying 'intersect:motion-preset-slide-up' and incrementing 'motion-delay-' for each item. ```html
First item
Second item
Third item
``` -------------------------------- ### Continuous Rotation Loop Source: https://docs.rombo.co/tailwind/base-animations/rotate Create a continuous rotation effect using the '-motion-rotate-loop' class. This is useful for elements that should spin indefinitely. ```html
Continuous rotation
``` -------------------------------- ### Typewriter Animation Preset Source: https://docs.rombo.co/tailwind/presets/loop Applies a typewriter animation effect, specifying the number of characters to animate. ```html
typewriter
``` -------------------------------- ### Basic Rotation Out Animation Source: https://docs.rombo.co/tailwind/base-animations/rotate Apply a basic 'rotate-out' animation to an element. This class rotates the element out of view. ```html
Rotate out
``` -------------------------------- ### Control Animation Loop Count Source: https://docs.rombo.co/tailwind/modifiers Set the number of times an animation repeats using `motion-loop` utilities. `motion-loop-infinite` is the default. ```html
``` ```html
``` ```html
``` -------------------------------- ### Basic Scroll Animation Source: https://docs.rombo.co/tailwind/scroll-animations Apply the 'intersect:' prefix to any Rombo animation class to make it trigger when the element scrolls into view. ```html
Fade in on scroll
``` -------------------------------- ### Exit Translation Animation Source: https://docs.rombo.co/tailwind/base-animations/translate Use exit animations like `motion-translate-y-out-100` to make an element slide out downwards. ```html
Slide out downward
``` -------------------------------- ### Text Color Exit Animation Source: https://docs.rombo.co/tailwind/base-animations/text-color Apply an exit animation to text color using `motion-text-out-{color}`. ```html
Exit animation
``` -------------------------------- ### Initialize Observer in React Source: https://docs.rombo.co/tailwind/scroll-animations Initialize the Observer from tailwindcss-intersect within a React component using useEffect. This should be done once when the component mounts. ```typescript "use client"; import { Observer } from "tailwindcss-intersect"; import { useEffect } from "react"; export default function ObserverProvider({ children, }: { children: React.ReactNode }) { useEffect(() => { Observer.start(); }, []); return <>{children}; } ``` -------------------------------- ### Property-Specific Easing Source: https://docs.rombo.co/tailwind/modifiers/ease Apply different easing functions to separate properties within the same element. Spring easing is used for rotation, while a smoother easing is applied to opacity. ```html
Bouncy rotation, smooth opacity
``` -------------------------------- ### Flomoji Animation Preset Source: https://docs.rombo.co/tailwind/presets/loop Applies a flomoji animation effect, allowing for custom emoji. ```html
flomoji-[🚀]
``` -------------------------------- ### Combine Grayscale with Other Animations Source: https://docs.rombo.co/tailwind/base-animations/grayscale You can combine grayscale animations with other Rombo animation classes, such as blur, to create complex visual effects. Ensure classes are applied to the same element. ```html
Grayscale and blur
``` -------------------------------- ### Combine Text Color with Duration Modifier Source: https://docs.rombo.co/tailwind/base-animations/text-color Customize the duration of text color transitions by combining `motion-text-in-{color}` with `motion-duration-[value]`. ```html
Slow color transition
``` -------------------------------- ### Oscillate Animation Preset Source: https://docs.rombo.co/tailwind/presets/loop Applies an oscillate animation effect. Available in small, medium, and large sizes. ```html
oscillate
``` -------------------------------- ### Fade Out Opacity Animation Source: https://docs.rombo.co/tailwind/base-animations/opacity Use the `motion-opacity-out-*` classes to fade an element out. This is useful for exit animations. ```html
Fade out
``` -------------------------------- ### Play State Control with Modifiers Source: https://docs.rombo.co/tailwind/applying-modifiers Use play state modifiers to control animation playback. The animation is paused by default and resumes on hover. ```html
Hover to play
``` -------------------------------- ### Single Loop Animation Source: https://docs.rombo.co/tailwind/modifiers/loop-count Set an animation to loop only once using the `motion-loop-once` modifier. This ensures the animation plays a single time. ```html
Loop once
``` -------------------------------- ### Adjust Duration of Slide Right Preset Source: https://docs.rombo.co/tailwind/presets/customizing Modify the duration of the 'motion-preset-slide-right' animation to 2000ms with the 'motion-duration-2000' class. ```html
``` -------------------------------- ### Add tailwindcss-intersect to Tailwind Config Source: https://docs.rombo.co/tailwind/scroll-animations Add the tailwindcss-intersect plugin to your Tailwind CSS configuration file. ```javascript module.exports = { content: [...], theme: { extend: {...}, }, plugins: [ require('tailwindcss-motion'), require('tailwindcss-intersect') ], }; ``` -------------------------------- ### Infinite Loop Animation Source: https://docs.rombo.co/tailwind/modifiers/loop-count Use the `motion-loop-infinite` modifier to make an animation repeat indefinitely. This is the default behavior if no loop count is specified. ```html
Loop forever
``` -------------------------------- ### Increase Bounce Height Source: https://docs.rombo.co/tailwind/presets/customizing Increase the height of the 'motion-preset-bounce' animation by applying a negative Y-translate modifier, such as '-motion-translate-y-in-150'. ```html
``` -------------------------------- ### Individual Axis Scaling Source: https://docs.rombo.co/tailwind/base-animations/scale Scale elements along the X or Y axis independently. Supports the same directions as normal scale animations. ```html
Scale X
Scale Y
``` ```html
Loop scale X
``` -------------------------------- ### Individual Axis Translation Source: https://docs.rombo.co/tailwind/base-animations/translate Animate translation along the X or Y axis. Use `motion-translate-x-[direction]-[value]` for horizontal movement and `motion-translate-y-[direction]-[value]` for vertical movement. ```html
Slide in from right
Slide up
``` -------------------------------- ### Pause Animation on Hover Source: https://docs.rombo.co/tailwind/modifiers/play-state Use the `hover:motion-paused` utility to pause an animation when the element is hovered over. This is useful for interactive elements where you want to temporarily stop animation for better user experience. ```html
Hover to pause
``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.