Parallax scrolling in 3 lines of code!
HTML-код
- Опубликовано: 28 сен 2022
- I can't stop, won't stop making videos on Framer Motion because it's just too dang fun! Check out how to add parallax scrolling with so few lines of code that you can count em' on one hand.
📖 useScroll docs: www.framer.com/docs/use-scroll/
👉 Framer Motion course: samselikoff.com/framer-motion... 
Развлечения
This is so good! Loving all the neat tricks. Looking forward to the full course!
I can't wait for the course to drop 💪 thank you for an absolutely amazing content!
I love the way and style you deliver your thoughts. Great stuff!
can't get enough of your videos, very looking forward to your course!
Dude, you're the living definition of the frontend. Thnx for the great content
Hope your channel keeps growing, love your videos.
Always so glad when you drop content, easily one of my favorite content creators right now. Eagerly waiting for your course and this site to be released
it's the voice right...
@@jww0007 It is not the voice, Sam knows what he is talking about compared to most.
Sam you're the absolute best, love the way you explained the scrollY concept. Thank you so much for this tutorial its exactly what I was looking for!
I, too, cannot wait for the course to drop. Awesome vid, thanks.
Makes a lot of sense, your very good at explaining things in plain english, I used Framer Motion on a website but I haven't messed around with scroll yet, now I have the confidence to try it!
A trillion thanks Sam for this tutorial, it's exactly what I was looking for to complete my skills.
Thank you very much 👍
🔥effect looks amazing with the subtle background
That's so cool, and impressive how easy it is to do with framer motion.
And it is very performant.
I love this video’s preview SO MUCH! I can’t even express it 😅
Great Video. Learned a lot. I saw parralax in other video but you explained more clearly. And I just needed to watch it once to understand.
Favourite video so far!
Best video reference for Parallax Effect, I have been looking for a long time and found one, it was simple and easy to understand.
Thanks :)
Thanks sam learning so much from your videos! Framer motion should link your videos as an official guide haha.
I can't understand the instructions in the official document at all, but after watching your video and thinking about it for 3 seconds, I got it. Thank you.
crazy video, really helpful thank you brother
thanks, a nice and effective support of Framer's documentation, super clear
So cool! Thanks for sharing!
Best content I found after searching all day 😍
Another great one
Just what i needed ^^ thx
Awesome! Thank you much!
you are a genius !!!!! 👍👍👍👍 chapeaux!!
TNice tutorials the best tutorial I've ever watched! Super informatic and love the softow in wNice tutorialch you taught everytNice tutorialng. Thanks a lot
First time seeing someone doing a code tutorial from the couch.. 😀👍
thank u so much
thank you
Wow! I've used a specific library for this because I thought it would be too complicated with framer motion but you just proved otherwise! Thank you so much for the high quality content. I'm just curious... any specific reason you're using "let" instead of "const"?
Loved the explanation and the solution you came up with. I'm in the same boat, I was always curious how to do this but never had a reason to implement it myself.
Word to the wise though, from the guidance I've read we should be cautious with parallax effects from an accessibility standpoint. In a live app there should probably be a check if the user has a preference for reduced motion set, and if so this should be disabled.
Totally agree, FM even has a useReducedMotion hook. Will point that out next time 👍
Wonderful!
I am eager to see this website live. Can you tell me how did you create that dotted grid style (seems wonderful, like a bluepritn)? As I can see you are not using css-grid but flex.
really nice video setup also, how you explain from showing us from your couch 😁
Very in-depth explanation.
Want to see how you create the video section? Or you plain something else?
Thank you
thanks BRO, Hello from Uzbekistan, center of Asia
👍👍👍
Thanks for sharing. How do you set the subtle background image grid? & Where do you get those assets?
The title appeals to draconian brevity and efficiency. The video's length completely undermines that.
Amazing as always. Can you also use what you just taught us to create animations/transitions on scroll?
Yes, but FM even has a high-level utility to make this super easy! www.framer.com/docs/use-in-view/
awesome
good content
Good teacher
Are you going to be my favorite channel or what?😍❤
nice
check out my 3 ingredient cake!
1. boxed cake mix
2. water
3. eggs
Subscribeed love your content smooth and steady
Have a good walk, Sam
How did you make those gradients?
Hey i was wonderwing what fond do you use in that video
Hi Sam! How were the layout faded lines created on the background? 🤔
record some of video about best practices and design patterns and testing and optimize react and next app
Very nice explanation! How would you handle the situation where using vertical scroll (main mouse wheel or top bottom motion on trackpad) to scroll a horizontal container using Framer-Motion - basically a scroll hijacking, but also using useSpring() utility? I've tried to figure this one out using Framer, but results was not great and found an example in React-Spring using interpolate() and imperative API that I modified to my purpose that performance-wise works, well... okay.
Hmm, that is a great question! So something like where scrolling vertically actually moves the page horizontally? I don't think you'd want the actual overflow to be in the x direction because things like touchpads would expect that to be done with actual horizontal scrolling (e.g. scrolling a bookshelf on Netflix homepage). Do you have an example I could look at that kinda shows off what you're talking about?
This is awesome! But why am I getting a Typescript error when I do exactly what you do?
Argument of type '{ target: MutableRefObject; offset: string[]; }' is not assignable to parameter of type 'UseScrollOptions'.
Object literal may only specify known properties, and 'offset' does not exist in type 'UseScrollOptions'.ts(2345)
Do you have an ETA for your course. Can't wait for it to drop.
Going to be on buildui.com very soon! I'll be sure to send an email when it's ready if you want to sign up: samselikoff.com/framer-motion-course
How would you make this parallax responsive though? You haven't explained that in the video. I tried to apply the trick from your other video "Responsive Framer Motion with Tailwind CSS" by defining the custom CSS tailwind variable and passing it to the useTransform as, say, ["0%", "var(--scroll-end-max")] where I defined --scroll-end-max as [--scroll-end-max:0%] lg:[--scroll-end-max:-20vh] but it doesn't work. Framer motion somehow can't figure out how to scale between 0% and CSS var. If you scroll even a bit it immediately jumps to max value instead of extrapolating it within the range. Any advice?
why you dont do full turtorial ?
but isn't always scrolling background image even when it's not in view ?
That will forever be a problem
very
😲
really
its
3 lines of code but 16 mins video??