Fade-Up Scroll Reveal

Cards fade and rise into place as they scroll into view, one beat apart per column. Motion inView.

Original
GPU-friendly
Motion
Reduced-motion ready
Customisable
1.1 KB gzip

An original by PasteMotion · MIT License

WidthFull

Code

index.html

<section class="fade-up-reveal">
  <header class="fade-up-reveal__intro">
    <h2 class="fade-up-reveal__heading">Features that show up on cue</h2>
    <p class="fade-up-reveal__hint">Scroll down ↓</p>
  </header>
  <div class="fade-up-reveal__grid">
    <article class="fade-up-reveal__card"><h3>Fast</h3><p>Only transform and opacity animate, so it stays smooth.</p></article>
    <article class="fade-up-reveal__card"><h3>Accessible</h3><p>Reduced-motion users get the content immediately.</p></article>
    <article class="fade-up-reveal__card"><h3>Progressive</h3><p>Without JavaScript, every card is simply visible.</p></article>
    <article class="fade-up-reveal__card"><h3>Staggered</h3><p>Cards in the same row arrive a beat apart.</p></article>
    <article class="fade-up-reveal__card"><h3>One-shot</h3><p>Each card animates once, then stays put.</p></article>
    <article class="fade-up-reveal__card"><h3>Tiny</h3><p>A few lines on top of Motion's inView.</p></article>
  </div>
</section>

How to use it

Paste the HTML where the animation should appear.
Add the CSS to your stylesheet. Every class starts with the animation's name, so it won't clash with yours.
Load Motion from the CDN (see the JS tab), then add the script.
Adjust the custom properties (--accent) on .fade-up-reveal to restyle it without touching the rest.
Reduced-motion users are covered: the animation calms down or stops when that setting is on.

Reading Progress Bar

Scroll reveals · PasteMotion original

Original
GPU-friendly
Vanilla JS
Reduced-motion ready

Cursor Spotlight Reveal

Cursors · PasteMotion original

Original
Vanilla JS
Reduced-motion ready

Spring Hover Cards

Hover effects · PasteMotion original

Original
Vanilla JS
Reduced-motion ready

3D Purple Card

Cards · @htwarriors108

GPU-friendly
No JS
Reduced-motion ready

Twitter Instagram Card

Cards · @vinodjangid07

GPU-friendly
No JS
Reduced-motion ready

Cube 3D Loader

Loaders · @jeremyssocial

GPU-friendly
No JS
Reduced-motion ready

<section class="fade-up-reveal"> <header class="fade-up-reveal__intro"> <h2 class="fade-up-reveal__heading">Features that show up on cue</h2> <p class="fade-up-reveal__hint">Scroll down ↓</p> </header> <div class="fade-up-reveal__grid"> <article class="fade-up-reveal__card"><h3>Fast</h3><p>Only transform and opacity animate, so it stays smooth.</p></article> <article class="fade-up-reveal__card"><h3>Accessible</h3><p>Reduced-motion users get the content immediately.</p></article> <article class="fade-up-reveal__card"><h3>Progressive</h3><p>Without JavaScript, every card is simply visible.</p></article> <article class="fade-up-reveal__card"><h3>Staggered</h3><p>Cards in the same row arrive a beat apart.</p></article> <article class="fade-up-reveal__card"><h3>One-shot</h3><p>Each card animates once, then stays put.</p></article> <article class="fade-up-reveal__card"><h3>Tiny</h3><p>A few lines on top of Motion's inView.</p></article> </div> </section>

How to use it

Paste the HTML where the animation should appear.

Add the CSS to your stylesheet. Every class starts with the animation's name, so it won't clash with yours.

Load Motion from the CDN (see the JS tab), then add the script.

Adjust the custom properties (--accent) on .fade-up-reveal to restyle it without touching the rest.

Reduced-motion users are covered: the animation calms down or stops when that setting is on.

Code

How to use it