How to Make a Zoom Parallax using Next.js and Framer Motion
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
