profile picture of Olivier Larose

Olivier Larose

January 30, 2024

/

Advanced

/

Short

SVG Path On Scroll

How to Animate an SVG path on Scroll using the Canvas API

A website tutorial featuring an SVG path animation on scroll using the Canvas API, inside a Next.js application. Inspired by https://lusion.co/

Live Demo
background video

It seems you don’t have access to this tutorial.

This tutorial is part of the Web Animation Course.

Learn more

Related Animations

image

June 2, 2024

Mask Section Transition

A website tutorial featuring a scroll animation using an SVG Mask to create a section transition, made with React, Framer Motion. Inspired by: https://axelvanhessche.com/. Pictures by Eric Asamoah, Inka and Niclas Lindergård, Daniel Ribar

image

May 25, 2024

Background Image Parallax

A website animation featuring a background image moving on scroll in a parallax motion, made with Framer Motion and React, inside a Next.js app. Inspired by: https://inkfishnyc.com/. Pictures by Matthias Leidinger

image

May 25, 2024

Text Parallax

A website animation featuring a Text Parallax with sliding text on scroll, made with Framer Motion and React, inside a Next.js app