Panel Wipe Page Intro

Colour panels sweep up and away to reveal a headline word by word, all on one Anime.js timeline.

Original
GPU-friendly
Anime.js
Reduced-motion ready
Customisable
1.1 KB gzip

An original by PasteMotion · MIT License

WidthFull

Code

index.html

<div class="intro-sequence">
  <div class="intro-sequence__panels" aria-hidden="true">
    <i class="intro-sequence__panel"></i>
    <i class="intro-sequence__panel"></i>
    <i class="intro-sequence__panel"></i>
  </div>
  <div class="intro-sequence__content">
    <h2 class="intro-sequence__title">
      <span class="intro-sequence__mask"><span class="intro-sequence__word">Welcome</span></span>
      <span class="intro-sequence__mask"><span class="intro-sequence__word">to</span></span>
      <span class="intro-sequence__mask"><span class="intro-sequence__word">the</span></span>
      <span class="intro-sequence__mask"><span class="intro-sequence__word">show</span></span>
    </h2>
    <p class="intro-sequence__text">A page intro choreographed on one Anime.js timeline.</p>
  </div>
</div>

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 Anime.js from the CDN (see the JS tab), then add the script.
Adjust the custom properties (--accent, --color-2, --color-3) on .intro-sequence to restyle it without touching the rest.
Reduced-motion users are covered: the animation calms down or stops when that setting is on.

Curtain Wipe Transition

Page transitions · PasteMotion original

Original
GPU-friendly
Vanilla JS
Reduced-motion ready

Aurora Mesh Background

Backgrounds · PasteMotion original

Original
GPU-friendly
No JS
Reduced-motion ready

Success Check Draw

Loaders · PasteMotion original

Original
Vanilla JS
Reduced-motion ready

Trailing Cursor Ring

Cursors · PasteMotion original

Original
Vanilla JS
Reduced-motion ready

Cursor Spotlight Reveal

Cursors · PasteMotion original

Original
Vanilla JS
Reduced-motion ready

Elastic Toggle Switch

Toggles · PasteMotion original

Original
Vanilla JS
Reduced-motion ready

<div class="intro-sequence"> <div class="intro-sequence__panels" aria-hidden="true"> <i class="intro-sequence__panel"></i> <i class="intro-sequence__panel"></i> <i class="intro-sequence__panel"></i> </div> <div class="intro-sequence__content"> <h2 class="intro-sequence__title"> <span class="intro-sequence__mask"><span class="intro-sequence__word">Welcome</span></span> <span class="intro-sequence__mask"><span class="intro-sequence__word">to</span></span> <span class="intro-sequence__mask"><span class="intro-sequence__word">the</span></span> <span class="intro-sequence__mask"><span class="intro-sequence__word">show</span></span> </h2> <p class="intro-sequence__text">A page intro choreographed on one Anime.js timeline.</p> </div> </div>

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 Anime.js from the CDN (see the JS tab), then add the script.

Adjust the custom properties (--accent, --color-2, --color-3) on .intro-sequence 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