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
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! 🙏🏼
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
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?
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 :)
@@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
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 !
@@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.
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"
life is not what it used to be 10min before
That's the perfect explanation for
["start end", "end start"]
Thanks man 👍🏼
It’s a confusing one haha, happy I can help :)
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
Apologies 😬😂😂
first time being the thousandth like 🎉 gg great video
Make more of this kind of more... I think you are USP is framer motion, so keep making video on it
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! 🙏🏼
dude, u are brilliant ! i am hugh fan of framer motion, and thanks for your content
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?
How has your experience with this been on mobile? I find that it's pretty stuttery on mobile.
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
@@tomisloading How do you personally opt out devices?
@@tomisloading I realized some of the stuttering came from having a button with lots of box shadows which the browser has trouble animating.
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?
Found your channel a few days ago and I've been binge watching your stuff. Great content man!
Thank you!! :)
Love your videos. No nonsense talk just talking about the topic.
Thank you!! Trying to keep them more concise :)
Precise and on-point, as always! 🔥🔥
Yes🚀🔥❤ just the masterclass I've been waiting for
😎
man, thanks, helped a lot, please keep doing those videos
sir please make more videos like this
im having some issues with the animations flickring
sir please can you do this also for react native please
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 :)
@@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
i like your pacing, will come back for sure
It is usebable to make om scroll highlights link?
Absolutely phenomenal explanations ! 😃
Wonderful tutorial! Thank you 🙏
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 !
Thank you for creating this. Please also explain useTime, useWillChange, useAnimationFrame and what is the use of useVelocity?
Sure, I can make a video on those!
@@tomisloading thank you really wouldlove to watch
How do you put that background
amazing stuff, thank you!
Currently thre Framer-Motion not working with NextJs Why ? 😢 I'm getting error
What kind of error? Can you show us? It's working fine here
@@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)
Try "use client"
@@prajil_ thanks 🥺
Thank you man for this.
Happy I can help :)
Thank you , keep it up
Absolute legend
Nice stuff, keep it up!!
This is what i need most right now
Heck yea, happy I can help!! :)
@@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.
Wouldn't using the `style` with passed in motion values for useScroll opt out the component from using hardware acceleration?
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"
Excellent, thanks!
You're welcome!
Thanks man for everything , gonna buy hover pro for sure to appreciate your dedication and work
Thank you!!! 😁😁
Animations make website slower 🦥