Rombo for Tailwind

https://docs.rombo.co/tailwind
Admin
Rombo for Tailwind provides documentation and tools for integrating Rombo's features with Tailwind...
Tokens:12,723
Snippets:250
Trust Score:7
Update:5 months ago
Show doc for...
Tokens:
Raw
### 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
<div class="motion-preset-fade motion-duration-100">Quick fade</div>
```

--------------------------------

### 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
<div class="motion-preset-fade motion-delay-500">Delayed fade in</div>
```

--------------------------------

### 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
<div class="motion-preset-fade motion-delay-0">First item</div>
<div class="motion-preset-fade motion-delay-[200ms]">Second item</div>
<div class="motion-preset-fade motion-delay-[400ms]">Third item</div>
```

--------------------------------

### 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
<div class="motion-delay-0/opacity motion-delay-500/rotate motion-opacity-in-0 motion-rotate-in-180">
  Immediate fade, delayed rotation
</div>
```

--------------------------------

### 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
<div class="motion-preset-pulse-sm">
  Pulse animation
</div>

```

--------------------------------

### 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
<div class="motion-translate-y-loop-25">
  Continuous up and down motion
</div>
```

--------------------------------

### 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
<div class="motion-duration-100/opacity motion-duration-2000/rotate motion-opacity-in-0 motion-rotate-in-180">
  Fast fade, slow rotation
</div>
```

--------------------------------

### 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
<div class="motion-preset-fade">
Fade in
</div>
```

--------------------------------

### 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
<div class="motion-translate-y-out-100">
  Slide down and fade out
</div>
```

--------------------------------

### 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
<div class="motion-translate-x-loop-50 motion-translate-y-loop-25">
  Loop horizontally and vertically
</div>
```

--------------------------------

### 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
<div class="motion-translate-y-loop-25 motion-loop-twice">Loop twice</div>
```

--------------------------------

### 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
<div class="motion-preset-fade motion-duration-[3s]">Very slow fade</div>
```

--------------------------------

### 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
<div class="motion-opacity-in-0 motion-translate-y-in-100">
  Fade in while sliding up
</div>
```

--------------------------------

### 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
<div class="motion-translate-y-out-100 motion-rotate-out-45 motion-blur-out-sm">
  Complex exit animation
</div>
```

--------------------------------

### 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
<div class="motion-opacity-in-0 motion-translate-y-in-100 motion-rotate-in-90">
  Complex animation!
</div>
```

--------------------------------

### 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
<div class="motion-translate-y-loop-25 motion-rotate-loop-45 motion-blur-loop-sm">
  Complex looping animation
</div>
```

--------------------------------

### 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
<div class="motion-translate-y-in-100 motion-opacity-in-0">
  Slide up and fade in
</div>
```

--------------------------------

### 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
<div
  class="motion-duration-2000 motion-rotate-in-180 motion-opacity-in-0"
></div>
```

--------------------------------

### 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
<div class="motion-duration-2000/rotate motion-rotate-in-180 motion-opacity-in-0">
  Slow rotation, default duration opacity
</div>
```

--------------------------------

### 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
<div
  class="motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0"
></div>
```

--------------------------------

### 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
<!-- Mirror animation (default) -->
<div class="motion-translate-y-loop-25/mirror"></div>
```

```html
<!-- Reset animation -->
<div class="motion-translate-y-loop-25/reset"></div>
```

--------------------------------

### 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
<div class="motion-translate-y-loop-50/reset">
  Instant reset motion
</div>
```

--------------------------------

### 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
<div class="motion-preset-fade motion-duration-2000">
  Slow fade in
</div>
```

--------------------------------

### 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
<div class="motion-translate-y-in-100 motion-ease-bounce">
  Bounce in from below
</div>
```

--------------------------------

### 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
<div class="motion-preset-fade motion-duration-2000">Slow fade in</div>
```

--------------------------------

### 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
<div class="motion-preset-slide-right-lg motion-duration-2000 motion-delay-500 motion-ease-bounce">
  Complex animation
</div>
```

--------------------------------

### 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
<div class="motion-translate-y-out-100 motion-duration-[2s] motion-ease-spring-smooth">
  Slow, smooth exit
</div>
```

--------------------------------

### 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
<div class="motion-loop-once/opacity motion-loop-twice/rotate motion-opacity-loop-50 motion-rotate-loop-180">Different loop counts per property</div>
```

--------------------------------

### 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
<div class="motion-rotate-in-90 motion-delay-1000">
  Rotate in with delay
</div>
```

--------------------------------

### 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
<div class="-motion-translate-y-loop-50 motion-duration-[2s] motion-ease-spring-smooth">
  Slow, smooth floating
</div>
```

--------------------------------

### 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
<div class="motion-blur-in-md motion-duration-[4s]">
  Blur with long duration
</div>
```

--------------------------------

### 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
<div class="motion-rotate-in-90 motion-scale-in-0">
  Rotate and scale in
</div>
```

--------------------------------

### 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
<div class="motion-loop-twice/rotate motion-rotate-loop-180 motion-translate-y-loop-25">Rotate twice, translate infinitely</div>
```

--------------------------------

### 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
<div class="motion-preset-expand">
    expand
</div>
```

--------------------------------

### 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
<div class="motion-preset-pop">
    pop
</div>
```

--------------------------------

### 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
<div class="motion-opacity-in-0 motion-duration-[4s]">
  Fade in with duration
</div>
```

--------------------------------

### 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
<div class="motion-bg-in-[#ff0000] motion-duration-[2s]">
  Slow color transition
</div>
```

--------------------------------

### 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
<div class="motion-preset-focus">
    focus
</div>
```

--------------------------------

### Apply Compress Animation Preset

Source: https://docs.rombo.co/tailwind/presets/enter

Apply a compress entrance animation using the `motion-preset-compress` class.

```html
<div class="motion-preset-compress">
    compress
</div>
```

--------------------------------

### 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
<div class="motion-preset-shake">
    shake
</div>
```

--------------------------------

### 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
<div class="motion-preset-rebound-up">
    rebound-up
</div>
```

--------------------------------

### Apply Shrink Animation Preset

Source: https://docs.rombo.co/tailwind/presets/enter

Apply a shrink entrance animation with the `motion-preset-shrink` class.

```html
<div class="motion-preset-shrink">
    shrink
</div>
```

--------------------------------

### Apply Wiggle Animation Preset

Source: https://docs.rombo.co/tailwind/presets/enter

Apply a wiggle entrance animation with the `motion-preset-wiggle` class.

```html
<div class="motion-preset-wiggle">
    wiggle
</div>
```

--------------------------------

### Apply Bounce Animation Preset

Source: https://docs.rombo.co/tailwind/presets/enter

Apply a bounce entrance animation using the `motion-preset-bounce` class.

```html
<div class="motion-preset-bounce">
    bounce
</div>
```

--------------------------------

### 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
<div class="motion-preset-blur-up">
    blur-up
</div>
```

--------------------------------

### 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
<div class="motion-preset-slide-up-left">
    slide-up-left
</div>
```

--------------------------------

### 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
<div class="motion-preset-slide-up">
    slide-up
</div>
```

--------------------------------

### 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
<div class="motion-preset-rebound-down">
    rebound-down
</div>
```

--------------------------------

### 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
<div class="motion-opacity-in-0 motion-translate-y-in-100 motion-blur-in-md">
  Fade in, slide up, and unblur
</div>
```

--------------------------------

### 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
<div class="motion-preset-blur-down">
    blur-down
</div>
```

--------------------------------

### 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
<div class="motion-preset-slide-down">
    slide-down
</div>
```

--------------------------------

### 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
<div class="motion-translate-y-in-100">
  Slide up on enter
</div>
```

--------------------------------

### 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
<div class="motion-ease-linear/opacity motion-ease-spring-bouncy/rotate motion-opacity-in-0 motion-rotate-in-180">
  Linear fade, bouncy rotation
</div>
```

--------------------------------

### Apply Confetti Animation Preset

Source: https://docs.rombo.co/tailwind/presets/enter

Use the `motion-preset-confetti` class for a confetti entrance animation.

```html
<div class="motion-preset-confetti">
    confetti
</div>
```

--------------------------------

### 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
<div class="motion-preset-slide-down-right">
    slide-down-right
</div>
```

--------------------------------

### 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 (
    <ObserverProvider>
      <YourApp />
    </ObserverProvider>
  );
}
```

--------------------------------

### 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
<div class="motion-preset-rebound-left">
    rebound-left
</div>
```

--------------------------------

### 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
<div class="motion-preset-slide-right">
    slide-right
</div>
```

--------------------------------

### 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
<div class="motion-preset-slide-down-left">
    slide-down-left
</div>
```

--------------------------------

### 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
<div class="motion-preset-slide-left">
    slide-left
</div>
```

--------------------------------

### 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
<div class="motion-preset-rebound-right">
    rebound-right
</div>
```

--------------------------------

### 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
<div class="-motion-translate-y-in-50 motion-ease-bounce">Bouncy translation</div>
```

--------------------------------

### 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
<div class="motion-bg-loop-purple-500">
  Loop colors
</div>
```

--------------------------------

### 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
<div class="motion-scale-loop-150">
  Loop scale
</div>
```

--------------------------------

### 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
<div class="motion-scale-in-0">
  Scale in
</div>
```

--------------------------------

### 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
<div class="motion-bg-in-red-500">
  Fade from red
</div>
```

--------------------------------

### 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
<div class="motion-translate-y-loop-50/mirror">
  Back-and-forth motion
</div>
```

--------------------------------

### 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
<div class="motion-preset-blur-left">
    blur-left
</div>
```

--------------------------------

### 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
<div class="motion-rotate-loop-[1turn]/reset motion-ease-linear">
  Spinner
</div>
```

--------------------------------

### 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
<div class="motion-preset-fade">
    fade
</div>
```

--------------------------------

### 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
<div class="motion-rotate-loop-[1turn]/reset"></div>
<div class="motion-rotate-loop-[1turn]/reset motion-ease-linear"></div>
```

--------------------------------

### 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
<div class="motion-translate-y-in-100 motion-duration-[2s] motion-ease-spring-smooth">
  Slow, smooth entrance
</div>
```

--------------------------------

### 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
<div class="motion-text-in-red-500 font-bold">
  Fade from red
</div>
```

--------------------------------

### 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
<div class="motion-translate-y-in-100 motion-rotate-in-45 motion-blur-in-sm">
  Complex entrance animation
</div>
```

--------------------------------

### 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
<div class="motion-text-in-red-500 motion-scale-in-0 font-bold">
  Text color and scale
</div>
```

--------------------------------

### 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
<div class="motion-scale-in-0 motion-ease-spring-bouncy">Spring scale</div>
```

--------------------------------

### 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
<div class="motion-translate-y-in-100">
  Slide up
</div>
```

--------------------------------

### 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
<div class="motion-preset-blur-right">
    blur-right
</div>
```

--------------------------------

### 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
<div class="motion-blur-in-md">
  Blur in
</div>
```

--------------------------------

### 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
<div class="motion-opacity-loop-50">
  Loop opacity
</div>
```

--------------------------------

### 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
<div class="motion-blur-in-md motion-opacity-in-0">
  Blur and fade in
</div>
```

--------------------------------

### 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
<div class="motion-bg-out-[#00ff00]">
  Exit animation
</div>
```

--------------------------------

### Spin Animation Preset

Source: https://docs.rombo.co/tailwind/presets/loop

Applies a spin animation effect.

```html
<div class="motion-preset-spin">
    spin
</div>
```

--------------------------------

### Blink Animation Preset

Source: https://docs.rombo.co/tailwind/presets/loop

Applies a blink animation effect.

```html
<div class="motion-preset-blink">
    blink
</div>
```

--------------------------------

### Seesaw Animation Preset

Source: https://docs.rombo.co/tailwind/presets/loop

Applies a seesaw animation effect. Available in small, medium, and large sizes.

```html
<div class="motion-preset-seesaw">
    seesaw
</div>
```

--------------------------------

### 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
<div class="motion-scale-in-0 motion-opacity-in-0">
  Scale and fade in
</div>
```

--------------------------------

### Wobble Animation Preset

Source: https://docs.rombo.co/tailwind/presets/loop

Applies a wobble animation effect. Available in small, medium, and large sizes.

```html
<div class="motion-preset-wobble">
    wobble
</div>
```

--------------------------------

### Stretch Animation Preset

Source: https://docs.rombo.co/tailwind/presets/loop

Applies a stretch animation effect. Available in small, medium, and large sizes.

```html
<div class="motion-preset-stretch">
    stretch
</div>
```

--------------------------------

### 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
<div class="motion-preset-slide-up-right">
    slide-up-right
</div>
```

--------------------------------

### 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
<div class="motion-scale-in-0 motion-ease-spring-bouncier">
  Scale in with spring
</div>
```

--------------------------------

### 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
<div class="motion-opacity-in-0 motion-translate-y-in-100">
  fade in and slide in from below!
</div>
```

--------------------------------

### 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
<div class="motion-blur-out-md">
  Blur out
</div>
```

--------------------------------

### 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
<div class="motion-text-loop-purple-500 font-bold">
  Loop colors
</div>
```

--------------------------------

### 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
<div class="motion-preset-fade motion-ease-[cubic-bezier(0.4,0,0.2,1)]">
  Custom easing curve
</div>
```

--------------------------------

### 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
<div class="motion-blur-loop-md">
  Looping blur
</div>
```

--------------------------------

### 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
<div class="motion-grayscale-loop-100">
  Loop grayscale effect
</div>
```

--------------------------------

### 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
<div class="motion-bg-in-red-500 motion-scale-in-0">
  Background and scale
</div>
```

--------------------------------

### 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
<!-- Pause the animation -->
<div class="motion-preset-bounce motion-paused"></div>
```

```html
<!-- Resume the animation -->
<div class="motion-preset-bounce motion-running"></div>
```

--------------------------------

### 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
<div class="motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0">
  Delayed rotation
</div>
```

--------------------------------

### 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
<div class="motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0">
  Delayed rotation, immediate opacity
</div>
```

--------------------------------

### Pulse Animation Preset

Source: https://docs.rombo.co/tailwind/presets/loop

Applies a pulse animation effect. Available in small, medium, and large sizes.

```html
<div class="motion-preset-pulse">
    pulse
</div>
```

--------------------------------

### 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
<div class="motion-grayscale-in">
  Fade to grayscale
</div>
```

--------------------------------

### 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
<div class="motion-opacity-in-0">
  Fade in
</div>
```

--------------------------------

### 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
<div class="motion-preset-fade motion-delay-[1500ms]">Long delay</div>
```

--------------------------------

### 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
<div class="motion-scale-out-0">
  Scale out
</div>
```

--------------------------------

### Float Animation Preset

Source: https://docs.rombo.co/tailwind/presets/loop

Applies a float animation effect. Available in small, medium, and large sizes.

```html
<div class="motion-preset-float">
    float
</div>
```

--------------------------------

### 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
<div class="motion-preset-fade motion-delay-500"></div>
```

--------------------------------

### 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
<div class="intersect-once intersect:motion-preset-slide-up">
  Slide up once
</div>
```

--------------------------------

### 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
<div class="motion-rotate-in-90">
  Rotate in
</div>
```

--------------------------------

### 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
<div class="motion-grayscale-out">
  Exit to grayscale
</div>
```

--------------------------------

### 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
<div class="motion-scale-in-50 motion-duration-[1500ms] motion-ease-[cubic-bezier(1,-0.4,0.35,0.95)]">
  Custom timing
</div>
```

--------------------------------

### 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
<div class=" intersect:motion-opacity-in-0 intersect:motion-translate-y-in-100 intersect:motion-rotate-in-180">
  Complex scroll animation
</div>
```

--------------------------------

### 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
<div class="motion-grayscale-in motion-duration-[5s]">
  Slow grayscale transition
</div>
```

--------------------------------

### 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
<div class="space-y-4">
  <div class="intersect:motion-preset-slide-up motion-delay-0">
    First item
  </div>
  <div class="intersect:motion-preset-slide-up motion-delay-100">
    Second item
  </div>
  <div class="intersect:motion-preset-slide-up motion-delay-200">
    Third item
  </div>
</div>
```

--------------------------------

### 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
<div class="-motion-rotate-loop-45">
  Continuous rotation
</div>
```

--------------------------------

### Typewriter Animation Preset

Source: https://docs.rombo.co/tailwind/presets/loop

Applies a typewriter animation effect, specifying the number of characters to animate.

```html
<div class="motion-preset-typewriter-[10]">
    typewriter
</div>
```

--------------------------------

### 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
<div class="motion-rotate-out-45">
  Rotate out
</div>
```

--------------------------------

### 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
<!-- Infinite loop (default) -->
<div class="motion-translate-y-loop-25"></div>
```

```html
<!-- Loop twice -->
<div class="motion-translate-y-loop-25 motion-loop-twice"></div>
```

```html
<!-- Loop once -->
<div class="motion-translate-y-loop-25 motion-loop-once"></div>
```

--------------------------------

### 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
<div class="intersect:motion-preset-fade">
  Fade in on scroll
</div>
```

--------------------------------

### 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
<div class="motion-translate-y-out-100">
  Slide out downward
</div>
```

--------------------------------

### 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
<div class="motion-text-out-[#00ff00] font-bold">
  Exit animation
</div>
```

--------------------------------

### 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
<div class="motion-ease-spring-bouncy/rotate motion-rotate-in-180 motion-opacity-in-0">Bouncy rotation, smooth opacity</div>
```

--------------------------------

### Flomoji Animation Preset

Source: https://docs.rombo.co/tailwind/presets/loop

Applies a flomoji animation effect, allowing for custom emoji.

```html
<div class="motion-preset-flomoji-[🚀]">
    flomoji-[🚀]
</div>
```

--------------------------------

### 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
<div class="motion-grayscale-in motion-blur-in-md">
  Grayscale and blur
</div>
```

--------------------------------

### 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
<div class="motion-text-in-[#ff0000] motion-duration-[2s] font-bold">
  Slow color transition
</div>
```

--------------------------------

### Oscillate Animation Preset

Source: https://docs.rombo.co/tailwind/presets/loop

Applies an oscillate animation effect. Available in small, medium, and large sizes.

```html
<div class="motion-preset-oscillate">
    oscillate
</div>
```

--------------------------------

### 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
<div class="motion-opacity-out-0">
  Fade out
</div>
```

--------------------------------

### 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
<div class="motion-preset-oscillate-lg motion-paused hover:motion-running">
  Hover to play
</div>
```

--------------------------------

### 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
<div class="motion-translate-y-loop-25 motion-loop-once">Loop once</div>
```

--------------------------------

### 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
<div class="motion-preset-slide-right motion-duration-2000"></div>
```

--------------------------------

### 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
<div class="motion-translate-y-loop-25 motion-loop-infinite">Loop forever</div>
```

--------------------------------

### 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
<div class="motion-preset-bounce -motion-translate-y-in-150"></div>
```

--------------------------------

### 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
<div class="motion-scale-x-in-0">
  Scale X
</div>
<div class="motion-scale-y-in-0">
  Scale Y
</div>
```

```html
<div class="motion-scale-x-loop-150">
  Loop scale X
</div>
```

--------------------------------

### 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
<div class="motion-translate-x-in-100">
  Slide in from right
</div>
<div class="motion-translate-y-in-100">
  Slide up
</div>
```

--------------------------------

### 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
<div class="motion-preset-float hover:motion-paused">Hover to pause</div>
```
Tokens:
Raw