The Framer Motion Scroll Animation Masterclass

There are THREE distinct ways to create scroll based & scroll triggered animations with Framer Motion.

With these 3 tools, and a bit of creativity, you can build just about anything you want.

Today, we'll see how they all work.

#reactjs #javascript #webdevelopment

📚 Video Links

🔗 My Links

0:00 - Introduction
0:10 - The basics using whileInView
1:48 - Stepping it up with the useInView hook
3:12 - The basics of useScroll
4:53 - useScroll with target elements
8:15 - useScroll with a different container element

[Solo_playz]

That's the perfect explanation for
["start end", "end start"]
Thanks man 👍🏼

[gadoosher]

Tom, I just have to tell you how much I LOVE your work and channel. No bs you make me want to be a better programmer and your videos are going to make that happen. Thank YOU! 🙏🏼

[nanonkay]

I am creating a portfolio site that has been using all of this stuff lately, its 99% scroll effects. Unfortunately, I had to learn this the hard way lol. Had I known this video was coming, I would have definitely waited

[immdipu]

Love your videos. No nonsense talk just talking about the topic.

[Rico-cpxp]

Found your channel a few days ago and I've been binge watching your stuff. Great content man!

[essenc]

dude, u are brilliant ! i am hugh fan of framer motion, and thanks for your content <3 and the explenation of offset is great. thanks again <3

[tamaniphiri]

Yes🚀🔥❤ just the masterclass I've been waiting for

[MdRifatAhmedMohammadNaiem]

Make more of this kind of more... I think you are USP is framer motion, so keep making video on it

[djikstra]

Absolutely phenomenal explanations ! 😃

[siligarocraft]

i like your pacing, will come back for sure

[sohrabkhan]

Thank you for creating this. Please also explain useTime, useWillChange, useAnimationFrame and what is the use of useVelocity?

[AntonioBrandao]

4:00 how do you have scroll length for all that y progress if all you have in the DOM is a short fixed rectangle?

[bonchan]

hello tom in your website do you have a section where you compile all your free stuff ? . im broke for now cant buy the whole examples . i binge watching your framer motion videos . anyway thank you for this video !

[Az]

im having some issues with the animations flickring

[aiyn]

It is usebable to make om scroll highlights link?

[jonny]

Wouldn't using the `style` with passed in motion values for useScroll opt out the component from using hardware acceleration?

[aikoooow]

Hey, Tom,
Im really into framer motion. The only issue i found is that when checking the website on mobile, it's laggy and bad compared to on a desktop browser. any tips to improve performance?

[hubesh]

sir please can you do this also for react native please

[jonny]

How has your experience with this been on mobile? I find that it's pretty stuttery on mobile.

[PrMovies]

Currently thre Framer-Motion not working with NextJs Why ? 😢 I'm getting error