SVG Path Animation with Anime.js

A perfect recreation of Runway.com's path animation system using Anime.js instead of GSAP.

View on GitHub Full Screen Demo

The Challenge

I came across Runway.com's website and was captivated by their beautiful scroll-triggered SVG path animations. The way the paths drew in as you scrolled through the page created a compelling visual narrative. I noticed they were using GSAP for these animations, but as an Anime.js enthusiast, I wondered: could I recreate this effect using Anime.js?

Demo

A perfect recreation of Runway's path animation system using Anime.js instead of GSAP:

How It Works

Core Principles

• Outside-In Drawing: Paths start from the outer edges and converge toward the center as you scroll
• Top-to-Bottom Flow: The animation progresses naturally from top to bottom as you scroll down the page
• Initial Progress: Paths start partially drawn to immediately engage visitors
• Multi-Stage Animation: The longest path animates in segments with different timing to create visual interest
• Checkpoint Indicators: Animated checkmarks appear at key points along the journey

Customizable Parameters

You can easily modify these parameters at the top of the script:

// Define initial progress for each path (0 to 1)
const initialProgress = {
  path0: 0.2, // Starting progress for path 0 (right branch)
  path1: 0.3, // Starting progress for path 1 (left branch)
  path2: 0.25, // Starting progress for path 2 (bottom branch)
};

Usage

1. Include Anime.js in your project:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>

2. Set up your HTML with the SVG structure (see index.html)
3. Add the CSS styles (see style.css)
4. Include the JavaScript (see script.js)