How to Make a Zoom Parallax using Next.js and Framer Motion
Olivier Larose Olivier Larose
22K subscribers
19,818 views
0

 Published On Jan 31, 2024

A Smooth Scroll Parallax animation featuring a zoom with a sticky container. Made with React, Framer Motion and Next js. Pictures by Matthias Leidinger. Inspired by https://www.exoape.com/work/plugged-l...

Live demo / Source code:
https://blog.olivierlarose.com/tutori...

00:00 Intro
00:24:12 Overview
1:20:00 Making a sticky container
2:24:29 Adding the first image
3:53:12 Scaling on scroll
5:55:24 Adding the other images
8:59:14 Secret technique
11:15:06 Creating the parallax
12:19:25 Adding a smooth scroll
12:46:29 Outro

More animations: https://blog.olivierlarose.com/
Follow me on Twitter:   / olivierlarose_  
Discord Channel:   / discord  

Thanks for watching!

#react #nextjs #awwwards #gsap #framer #motion

show more

Share/Embed