Scroll-Triggered Animations with Spring Physics

Mochi Motion is an animation library for React and Next.js that allows you to create beautiful, high-performance, scroll-triggered, and natural-feeling motion effects with professional spring physics.

The library is built upon Framer Motion but provides intelligent defaults, which allows you to implement complex animations with minimal configuration.

GitHub Repo

Features

🚀 Zero Configuration Setup – Drop into any React or Next.js project with minimal setup requirements

🎯 Framework Compatibility – Works with React, Next.js App Router, Pages Router, Vite, and Create React App

🏃 Performance Optimized – Uses Intersection Observer API with smart defaults for efficient scroll detection

📱 Eight Animation Effects – Includes fade, scale, blur, and rotate animations with professional timing

🌊 Professional Spring Physics – Four carefully tuned presets plus full customization options

💪 TypeScript Native – Written entirely in TypeScript with comprehensive type definitions

📦 Production Ready – Only 8KB compressed with battle-tested performance in real applications

🎛️ Advanced Customization – Fine-tune spring configurations, delays, and trigger behaviors

🔄 Smart Animation Management – Staggered animations and performance optimization controls

🌐 Modern Browser Support – Compatible with all modern browsers and React versions

Use Cases

Landing Page Hero Sections – Create fancy hero animations that capture user attention with staggered reveal effects for headlines, descriptions, and call-to-action buttons.
Feature Showcase Grids – Implement cascading animations for feature cards, testimonials, and product highlights that guide user attention through content hierarchies.
E-commerce Product Pages – Add smooth reveal animations for product images, specifications, and related items that enhance the shopping experience.
Portfolio and Agency Websites – Build project showcases with fancy animation sequences that demonstrate technical expertise and design quality.
SaaS Dashboard Interfaces – Implement smooth animations for data visualizations, form interactions, and navigation elements that improve user engagement.

Installation

Install mochi-motion along with its peer dependencies, framer-motion and react-intersection-observer.

npm install mochi-motion framer-motion react-intersection-observer

How to Use

1. Wrap your application’s root component with the appropriate transition provider. This component handles page-level transitions. The provider you use depends on your project’s framework.

React (Vite, Create React App):

Use the ReactTransition component in your main App component.

// App.tsx
import { ReactTransition, RevealOnScroll } from 'mochi-motion';
function App() {
  return (
    <ReactTransition>
      {/* Your application components go here */}
      <RevealOnScroll>
        <h1>Welcome to Your App</h1>
      </RevealOnScroll>
    </ReactTransition>
  );
}

Next.js App Router:

Wrap the children prop in your app/layout.tsx file with the AppRouterTransition component.

// app/layout.tsx
import { AppRouterTransition } from 'mochi-motion';
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AppRouterTransition>
          {children}
        </AppRouterTransition>
      </body>
    </html>
  );
}

Next.js Pages Router:

In your pages/_app.tsx file, wrap the Component with PageTransition.

// pages/_app.tsx
import { PageTransition } from 'mochi-motion';
export default function App({ Component, pageProps }) {
  return (
    <PageTransition>
      <Component {...pageProps} />
    </PageTransition>
  );
}

2. Use the RevealOnScroll component to animate any element when it enters the viewport. You can wrap any component or JSX element with it.

import { RevealOnScroll } from 'mochi-motion';
function MyComponent() {
  return (
    <div>
      <RevealOnScroll effect="fade-up">
        <h2>This Title Fades Up</h2>
      </RevealOnScroll>
      <RevealOnScroll effect="scale-up" delay={0.2}>
        <p>This paragraph scales up after a short delay.</p>
      </RevealOnScroll>
    </div>
  );
}

3. Mochi Motion provides eight built-in effects that you can specify using the effect prop.

Fade Animations:

These effects slide and fade content into view.

<RevealOnScroll effect="fade-up">Content slides up</RevealOnScroll>
<RevealOnScroll effect="fade-down">Content slides down</RevealOnScroll>
<RevealOnScroll effect="fade-left">Content slides from the right</RevealOnScroll>
<RevealOnScroll effect="fade-right">Content slides from the left</RevealOnScroll>

Scale Animations:

These effects grow or shrink content into place.

<RevealOnScroll effect="scale-up">Content zooms in</RevealOnScroll>
<RevealOnScroll effect="scale-down">Content shrinks in</RevealOnScroll>

Special Effects:

These effects add unique visual flair.

<RevealOnScroll effect="blur-up">Content fades from a blur</RevealOnScroll>
<RevealOnScroll effect="rotate-up">Content rotates into place</RevealOnScroll>

4. Control the feel of the animation with four carefully tuned presets using the preset prop.

// Soft and premium feel
<RevealOnScroll preset="gentle">Gentle Animation</RevealOnScroll>
// Bouncy and engaging
<RevealOnScroll preset="wobbly">Wobbly Animation</RevealOnScroll>
// Quick and responsive
<RevealOnScroll preset="stiff">Stiff Animation</RevealOnScroll>
// Deliberate and impactful
<RevealOnScroll preset="slow">Slow Animation</RevealOnScroll>

5. For more control, you can customize the animations further.

Custom Spring Physics:

If the presets do not fit your needs, define your own physics by setting preset="custom" and passing a spring object.

<RevealOnScroll
  preset="custom"
  spring={{
    stiffness: 200, // Controls bounciness
    damping: 12,    // Controls oscillation
    mass: 1.2       // Controls the "weight"
  }}
>
  <p>Custom physics animation</p>
</RevealOnScroll>

Staggered Animations:

Create a sequence of animations by applying an increasing delay to elements in a list. This is effective for guiding user attention through a grid or list of features.

function FeatureGrid({ features }) {
  return (
    <div className="grid">
      {features.map((feature, index) => (
        <RevealOnScroll
          key={feature.id}
          effect="fade-up"
          delay={index * 0.1}
        >
          <FeatureCard {...feature} />
        </RevealOnScroll>
      ))}
    </div>
  );
}

Performance Optimization:

You can fine-tune the Intersection Observer behavior with additional props.

<RevealOnScroll
  effect="fade-up"
  threshold={0.2}    // Trigger when 20% of the element is visible
  rootMargin="50px"  // Trigger 50px before the element enters the viewport
  triggerOnce={true} // Animation will only run once
>
  <ExpensiveComponent />
</RevealOnScroll>

Related Resources

Framer Motion – The underlying animation library that powers Mochi Motion’s animations. Visit the official documentation for advanced animation concepts and patterns.
React Spring – An alternative spring-physics animation library for React applications. Check out the React Spring documentation for different animation approaches and philosophies.
React Intersection Observer – The library used for efficient scroll detection in Mochi Motion. Learn more about intersection observer patterns at the React Intersection Observer repository.

FAQs

Q: How does Mochi Motion differ from using Framer Motion directly?
A: Mochi Motion acts as a layer on top of Framer Motion. It simplifies the process by providing pre-configured components and animations with sensible defaults, so you can add scroll effects without writing complex animation logic yourself.

Q: Can I create custom animations beyond the provided presets?
A: You can customize the spring physics by setting the preset prop to custom and providing your own values for stiffness, damping, and mass. This allows for fine-tuned control over the animation feel.

Q: Does Mochi Motion work with Server Side Rendering?
A: Yes, Mochi Motion is fully compatible with Next.js SSR and static generation. The library includes specific components for both App Router and Pages Router implementations with proper hydration handling.

Q: How does Mochi Motion handle performance with many animated elements?
A: The library uses the Intersection Observer API to only animate elements when they enter the viewport. You can also configure threshold values and trigger-once behavior to optimize performance for your specific use case.

Q: Is Mochi Motion compatible with existing CSS frameworks like Tailwind CSS?
A: Yes, Mochi Motion works alongside any CSS framework. The animation components accept className props and don’t interfere with existing styling systems or frameworks.