v2.0Cnippet AOS 2.0 is here

Animate On Scroll
Made Simple

A lightweight animation on scroll library built with Motion. 30+ smooth animations that trigger when elements enter the viewport.

✨ 30+ Animation Variants⚡ Scroll Triggered🪶 Lightweight🔥 Highly Customizable

Get Started in Seconds

Installation

npm install cnippet-aos motion

Basic Usage

import { motion } from "motion"
import { fadeUp } from "cnippet-aos"

function MyComponent() {
  return (
    <motion.div
      {...fadeUp({
        delay: 0.2,
        duration: 0.8,
        scroll: true,
        once: true,
      })}
    >
      Your content
    </motion.div>
  )
}

Animation Gallery

Explore 30+ animation variants with live previews and ready-to-use code

fadeIn

{...fadeIn({ delay: 0.2, duration: 0.8 })}

fadeUp

{...fadeUp({ delay: 0.2, y: 30, duration: 0.8 })}

fadeDown

{...fadeDown({ delay: 0.2, y: -30, duration: 0.8 })}

fadeLeft

{...fadeLeft({ delay: 0.2, x: 30, duration: 0.8 })}

fadeRight

{...fadeRight({ delay: 0.2, x: -30, duration: 0.8 })}

Ready to Animate Your Website?

Start using Cnippet AOS in your projects today