Stagger Reveal

About this module

A row of items reveal one after another with a smooth fade-and-rise using GSAP's built-in stagger.

Installation

1. 1

   Install GSAP

   Install the animation library with your package manager.

   npm install gsap

2. 2

   Create the files

   Create `index.html`, `style.css` and `script.js` in the same folder.

3. 3

   Paste the code

   Copy each file's source into its matching file.

4. 4

   Run it

   Open `index.html` (or import the logic into your bundler setup).

Usage

1. 1

   Copy the HTML

   Paste the markup where you need it.

   <link rel="stylesheet" href="style.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
   <script src="script.js"></script>
   <div class="mh-stage">
     <div class="mh-item">01</div>
     <div class="mh-item">02</div>
     <div class="mh-item">03</div>
     <div class="mh-item">04</div>
   </div>

2. 2

   Paste the script

   Include `script.js` after GSAP.

   gsap.from(".mh-item", {
     opacity: 0,
     y: 40,
     scale: 0.8,
     duration: 0.6,
     ease: "back.out(1.7)",
     stagger: 0.12,
   });