Scroll Animations

For scroll-triggered animations, you'll need to use an additional library alongside Rombo for Tailwind as it doesn't support scroll animations yet.

In this guide, we'll show you how to implement scroll animations using tailwindcss-intersect.

Installation

First, install the tailwindcss-intersect plugin:

npm install -D tailwindcss-intersect

Then, add the plugin to your Tailwind configuration:

tailwind.config.js

module.exports = {
    content: [...],
    theme: {
        extend: {...},
    },
    plugins: [
        require('tailwindcss-motion'),
        require('tailwindcss-intersect') 
    ],
};

Setting Up the Observer

The plugin requires an observer to be initialized. Choose the appropriate setup based on your project:

Add the component to your project:

ObserverProvider.tsx

"use client";
import { Observer } from "tailwindcss-intersect";
import { useEffect } from "react";
 
export default function ObserverProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  useEffect(() => {
    Observer.start();
  }, []);
 
  return <>{children}</>;
}

And then wrap your app with the ObserverProvider:

App.tsx


import ObserverProvider from './ObserverProvider';
 
function App() {
  return (

    <ObserverProvider> 
      <YourApp />
    </ObserverProvider> 
  );
}

Basic Usage

Add the intersect: prefix to any Rombo animation class to trigger it when the element enters the viewport:

<div class="intersect:motion-preset-fade">
  Fade in on scroll
</div>

Fade in on scroll

One-Time Animations

Add the intersect-once class to trigger the animation only the first time an element enters the viewport:

<div class="intersect-once intersect:motion-preset-slide-up">
  Slide up once
</div>

Slide up once

Examples

Staggered List Items

Create a staggered animation effect for list items:

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

First item

Second item

Third item

Combined Animations

Mix multiple animations that trigger on scroll:

<div class=" intersect:motion-opacity-in-0 intersect:motion-translate-y-in-100 intersect:motion-rotate-in-180">
  Complex scroll animation
</div>

Complex scroll animation