profile picture of Olivier Larose

Olivier Larose

June 2, 2024

/

Intermediate

/

Short

Mask Section Transition

How to Make an SVG Mask Section Transition using React and Framer Motion

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

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

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

image

May 21, 2024

Sticky Footer

A website tutorial featuring a sticky footer animation with a reveal effect, made with position fixed and sticky using React and CSS.