The Framer Motion Scroll Animation Masterclass

[@Solo_playz]

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

[@tomisloading]

It’s a confusing one haha, happy I can help :)

[@nanonkay5669]

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

[@tomisloading]

Apologies 😬😂😂

[@immdipu]

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

[@tomisloading]

Thank you!! Trying to keep them more concise :)

[@Rico-cp4xp]

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

[@tomisloading]

Thank you!! :)

[@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! 🙏🏼

[@MdRifatAhmedMohammadNaiem]

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

[@jacccc7096]

amazing explanation at 6:13

[@tamaniphiri]

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

[@tomisloading]

😎

[@collinsk8754]

Precise and on-point, as always! 🔥🔥

[@safkatsadli1374]

This is what i need most right now

[@tomisloading]

Heck yea, happy I can help!! :)

[@safkatsadli1374]

@@tomisloading your playlist is full of awesome things, all in one place. I wonder if i implement all the things in my frontend project I'm sure I'll crack a good job.

[@olujobifolaranmi2133]

Thank you man for this.

[@tomisloading]

Happy I can help :)

[@marcorosenbaum9900]

man, thanks, helped a lot, please keep doing those videos

[@essenc3189]

dude, u are brilliant ! i am hugh fan of framer motion, and thanks for your content

[@tamerahmed9860]

Wonderful tutorial! Thank you 🙏

[@siligarocraft]

i like your pacing, will come back for sure

[@dev_guidance]

sir please make more videos like this

[@akarshsrivastav2696]

life is not what it used to be 10min before

[@djikstra]

Absolutely phenomenal explanations ! 😃

[@zhxnrs]

amazing stuff, thank you!

[@Forsvinne77]

Nice stuff, keep it up!!

[@sohrabkhan101]

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

[@tomisloading]

Sure, I can make a video on those!

[@sohrabkhan101]

@@tomisloading thank you really wouldlove to watch

[@Ari-pq4db]

Thank you , keep it up

[@bingers_uk]

Excellent, thanks!

[@tomisloading]

You're welcome!

[@deathdefier45]

Absolute legend

[@randeeprana5622]

Thanks for sharing❤

[@bradleyandrewercole6349]

Thanks man for everything , gonna buy hover pro for sure to appreciate your dedication and work

[@tomisloading]

Thank you!!! 😁😁

[@hubesh716]

sir please can you do this also for react native please

[@tomisloading]

I’ve thought about that, I do have a fair bit of RN experience, so might dabble with it sooner or later. In the short term though, definitely check out William Candillon’s videos for react native animation stuff :)

[@hubesh716]

@@tomisloading yes i know him but i am looking towards you thanks for suggestion i hope you record projects or some stuff for react native in coming days thanks again

[@vinit9598]

How do you put that background

[@jonny555333]

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

[@tomisloading]

Most performance issues I run into are more due to applying complex transforms with x/y etc instead of the actual transform property (which can be hardware accelerated, the short hands can not). On mobile, older slower devices are always going to be an issue if you have a LOT of animations. Newer devices I don’t run into much issue with. Can opt to not run animations on those devices

[@jonny555333]

@@tomisloading How do you personally opt out devices?

[@jonny555333]

@@tomisloading I realized some of the stuttering came from having a button with lots of box shadows which the browser has trouble animating.

[@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?

[@7A7z]

im having some issues with the animations flickring

[@jonny555333]

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

[@tomisloading]

Just had a different response, but realized I was wrong haha. You are correct (I actually didn't know this!), but motion values passed to the style prop do not support hardware acceleration. That said, for examples like what I showed, I wouldn't worry about it. Docs agree, pulled this from the hardware acceleration section under using transform vs individual transforms -> "it is recommended to normally use independent transforms for readability and flexibility, using transform directly only in situations where you really need the accelerated animations"

[@aiyn470]

It is usebable to make om scroll highlights link?

[@bonchan4404]

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 !

[@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?

[@PrMovies0]

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

[@Forsvinne77]

What kind of error? Can you show us? It's working fine here

[@mrstrangeUser]

@@Forsvinne77 eval (rsc) ode_modules\framer-motion\dist\es\context\MotionConfigContext.mjs (6:41) (rsc)/./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs file:///D:/codding/nextpractice/.next/server/vendor-chunks/framer-motion.js (310:1) __webpack_require__ file:///D:/codding/nextpractice/.next/server/webpack-runtime.js (33:42) eval webpack-internal:///(rsc)/./node_modules/framer-motion/dist/es/motion/index.mjs (6:90) (rsc)/./node_modules/framer-motion/dist/es/motion/index.mjs file:///D:/codding/nextpractice/.next/server/vendor-chunks/framer-motion.js (790:1) __webpack_require__ file:///D:/codding/nextpractice/.next/server/webpack-runtime.js (33:42) eval webpack-internal:///(rsc)/./node_modules/framer-motion/dist/es/render/dom/motion.mjs (6:75) (rsc)/./node_modules/framer-motion/dist/es/render/dom/motion.mjs file:///D:/codding/nextpractice/.next/server/vendor-chunks/framer-motion.js (1110:1) __webpack_require__ file:///D:/codding/nextpractice/.next/server/webpack-runtime.js (33:42) eval webpack-internal:///(rsc)/./src/app/page.tsx (8:71) (rsc)/./src/app/page.tsx file:///D:/codding/nextpractice/.next/server/app/page.js (162:1) Function.__webpack_require__ file:///D:/codding/nextpractice/.next/server/webpack-runtime.js (33:42) async eB file:///D:/codding/nextpractice/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:401143) async tt file:///D:/codding/nextpractice/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:404857) async tr file:///D:/codding/nextpractice/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:405407) async tr file:///D:/codding/nextpractice/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:405538) async tl file:///D:/codding/nextpractice/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (36:2057) async file:///D:/codding/nextpractice/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (36:2596)

[@prajil_]

Try "use client"

[@PrMovies0]

@@prajil_ thanks 🥺

[@nemila4904]

first time being the thousandth like 🎉 gg great video

[@idiothackz]

Animations make website slower 🦥