How to Make a Zoom Parallax using Next.js and Framer Motion
ฝัง
- เผยแพร่เมื่อ 30 ม.ค. 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 www.exoape.com/work/plugged-l...
Live demo / Source code:
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: blog.olivierlarose.com/
Follow me on Twitter: / olivierlarose_
Discord Channel: / discord
Thanks for watching!
#react #nextjs #awwwards #gsap #framer #motion
i dont know wat to say BUT SERIOUSLY THANK U FOR SHOWIN THIS COOL EFFECT
My pleasure
I am watching all your videos, this is the channel that I was looking for. Don't stop creating content please!
your videos are absolutely amazing. The way you explain the process along with the code is incredible!!
You are amazing, man. I can't wait for more tutorials like this
Thanks, will do!
Really cool tutorial, subscribed!
bro has a real tree in his room
Great dev ❤🎉
super super cool effect! 🔥🔥🔥
Thank you so much for sharing
My pleasure
Awesome, like always!
I glad to found your channel!
Cheers
Thanks for these videos, i got to learn a lot with from them
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! 🔥🔥
Cheers!
this is so cool
Thank you for sharing this secret sauce, those little things what separates great minds 🤯
your tutorial are always awesome 😍😍 Love itt
Glad you like them!
I don't know why you have less subs you deserve millions subs and mark my word one day you will achieve it.
Thank you so much, i really appreciate it
🔥
GENIUS!!!!!!!!!!!!
Cheers thanks for the support
thank you , bro
next level
Cheers
Quality content ❤
Cheers
Amazing 🎉
Thanks!
Amazing tutorial, can't wait for more video tutorials. Would love a tutorial on combining video content scrubbing + ScrollTrigger animation.
Noted!
Bro bro, why are others not sharing these kinda knowledge the way you do.
History will be kind to you :)
I appreciate it thanks!
Bro has never felt less oxygen in his room 🌍
Très cool mec!
Merci merci
you are amazing
Cheers
As always, awesome video!
Still waiting on the creative developer roadmap video :)
Coming soon!
You challenge me to do great. Thank you
Lets goo
good joooob bro and thanks
I appreciate it!
awesome video! when is the course coming out btw? :) looking forward for it :)
Soon!
wow
Cheers
Fantastic broother! Amazing content, congrats...
Im wondering if you would like to do typescript + app router ?
👏👏👏👏👏
Awesome video.
Is this can be done on video instead of images ?
Bro 😊
Bro🤜
😍😍😍😍😍😍
Nice video, can u also make some some video animation using framer motion?
noted!
@@olivierlarose1 tyvm, keep it up bro, love ur content
Need more creative effects bro, you're amazing🎉
Working on it!
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
Noted!
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 ?
Is there any way to do this into framer? I am trying to find way.
are there any other libraries like gsap or loco to create the same?
Of course it’s just a scale effect so you can use any animation library for that
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
You can remove the lenis scroll and use the native scroll too
hi, How much do you think about the price of the course? I'm waiting
Not sure yet
Why do you use NEXT not React Js?
I like Next
This is responsive or not
love it
Cheers
Awesome however I would like to know how to do it without any additional libraries 🥹
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
Noted!