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 www.exoape.com...
Live demo / Source code:
blog.olivierla...
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: blog.olivierla...
Follow me on Twitter: / olivierlarose_
Discord Channel: / discord
Thanks for watching!
#react #nextjs #awwwards #gsap #framer #motion

[@VNUN]

bro has a real tree in his room

[@keshavjuneja6499]

i dont know wat to say BUT SERIOUSLY THANK U FOR SHOWIN THIS COOL EFFECT

[@olivierlarose1]

My pleasure

[@ruangiklim9586]

Why is this choppy/laggy in mobile browser? Is it because useTransform? Nice vid & nice channel btw

[@akhlibaratam2118]

Can someone help me achieve this using tailwind instead of scss?? BTW the effect is amazing!!!

[@gastonperaltazappulla4126]

Question ! I tried to put an href on the images, but it does not work :( since all of them are stacked, any idea if this is possible and how ?

[@giggitygigs]

Thanks again 🔥🔥🔥🔥🔥🔥🔥🔥

[@NukalaVenkataRajakulaiShetty]

Awesome video.
Is this can be done on video instead of images ?

[@neonvideos1]

good thing your plants are real.

[@ziontutorial]

I don't know why you have less subs you deserve millions subs and mark my word one day you will achieve it.

[@Arshahdul_ahmed]

Need more creative effects bro, you're amazing🎉

[@olivierlarose1]

Working on it!

[@Drama1348]

This is responsive or not

[@inderjotsingh5868]

hi great animation , but it is kinda hard is on which div we are applying the properties to, so can you use tailwind , instead of sccs

[@olivierlarose1]

Noted!

[@chessknock17]

You are amazing, man. I can't wait for more tutorials like this

[@olivierlarose1]

Thanks, will do!

[@홍성준-h6s]

hi, How much do you think about the price of the course? I'm waiting

[@olivierlarose1]

Not sure yet

[@magnuserikkeenrobot1117]

awesome video! when is the course coming out btw? :) looking forward for it :)

[@olivierlarose1]

Soon!

[@shlokgupta4939]

are there any other libraries like gsap or loco to create the same?

[@olivierlarose1]

Of course it’s just a scale effect so you can use any animation library for that

[@versehackedyoursystem]

Found your channel randomly but it is a GEM! On my way to become a creative developer and this is incredibly informative, thank you for your work! 🔥🔥

[@olivierlarose1]

Cheers!

[@felipemuner]

Fantastic broother! Amazing content, congrats...
Im wondering if you would like to do typescript + app router ?
👏👏👏👏👏

[@reactdev2838]

Why do you use NEXT not React Js?

[@olivierlarose1]

I like Next

[@mode2317]

Nice video, can u also make some some video animation using framer motion?

[@olivierlarose1]

noted!

[@mode2317]

@@olivierlarose1 tyvm, keep it up bro, love ur content

[@RB_MAFIA]

🔥

[@EmaCovers95]

I am watching all your videos, this is the channel that I was looking for. Don't stop creating content please!

[@deividasmacavariani8684]

Thank you for sharing this secret sauce, those little things what separates great minds 🤯

[@soumikdaswin]

Is there any way to do this into framer? I am trying to find way.

[@aymenbachiri-yh2hd]

Thank you so much, i really appreciate it

[@p4nd4vgaming]

Thanks for these videos, i got to learn a lot with from them

[@Solo_playz]

Bro has never felt less oxygen in his room 🌍

[@jyotiogennavar9134]

your videos are absolutely amazing. The way you explain the process along with the code is incredible!!

[@vommir.]

Really cool tutorial, subscribed!

[@senselessplays]

What will happen if we use lenis scroll in zoom parallar component.
Because i don't want to turn my entire page into client side

[@olivierlarose1]

You can remove the lenis scroll and use the native scroll too

[@rockylikespocky]

Amazing tutorial, can't wait for more video tutorials. Would love a tutorial on combining video content scrubbing + ScrollTrigger animation.

[@olivierlarose1]

Noted!

[@inderjotsingh5868]

hi great animation , but it is kinda hard is on which div we are applying the properties to, so can you use tailwind , instead of sccs

[@olivierlarose1]

Noted!

[@shaked1233]

As always, awesome video!
Still waiting on the creative developer roadmap video :)

[@olivierlarose1]

Coming soon!

[@AMELIA-y5u]

GENIUS!!!!!!!!!!!!

[@olivierlarose1]

Cheers thanks for the support

[@k40L1n]

Bro bro, why are others not sharing these kinda knowledge the way you do.
History will be kind to you :)

[@olivierlarose1]

I appreciate it thanks!

[@leiyin1998]

thank you , bro

[@aminebouzaid5971]

Great dev ❤🎉

[@mosjunk7764]

You challenge me to do great. Thank you

[@olivierlarose1]

Lets goo

[@OwerWild]

Awesome, like always!
I glad to found your channel!

[@olivierlarose1]

Cheers

[@irfansaeedkhan7242]

this is so cool

[@hashbitfam]

😍😍😍😍😍😍

[@naylord5]

super super cool effect! 🔥🔥🔥
Thank you so much for sharing

[@olivierlarose1]

My pleasure

[@DaoPVT]

your tutorial are always awesome 😍😍 Love itt

[@olivierlarose1]

Glad you like them!

[@abdessamadezalmadi]

good joooob bro and thanks

[@olivierlarose1]

I appreciate it!

[@sajagshrestha8995]

Quality content ❤

[@olivierlarose1]

Cheers

[@soyelchicodelanus8471]

you are amazing

[@olivierlarose1]

Cheers

[@devwithzain]

Amazing 🎉

[@olivierlarose1]

Thanks!

[@MuhammadHamid-r6o]

next level

[@olivierlarose1]

Cheers

[@sakoner]

Très cool mec!

[@olivierlarose1]

Merci merci

[@nitinsingh2737]

Bro 😊

[@olivierlarose1]

Bro🤜

[@nikhilpsathyanathan]

wow

[@olivierlarose1]

Cheers

[@nellymotion]

love it

[@olivierlarose1]

Cheers

[@lorena0987]

Awesome however I would like to know how to do it without any additional libraries 🥹