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! 🙏🏼
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 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.
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 !
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
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"
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
That's the perfect explanation for
["start end", "end start"]
Thanks man 👍🏼
It’s a confusing one haha, happy I can help :)
Love your videos. No nonsense talk just talking about the topic.
Thank you!! Trying to keep them more concise :)
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! 🙏🏼
Found your channel a few days ago and I've been binge watching your stuff. Great content man!
Thank you!! :)
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 😬😂😂
Yes🚀🔥❤ just the masterclass I've been waiting for
😎
Precise and on-point, as always! 🔥🔥
dude, u are brilliant ! i am hugh fan of framer motion, and thanks for your content
Thank you man for this.
Happy I can help :)
man, thanks, helped a lot, please keep doing those videos
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.
Wonderful tutorial! Thank you 🙏
amazing explanation at 6:13
Absolutely phenomenal explanations ! 😃
Make more of this kind of more... I think you are USP is framer motion, so keep making video on it
Thanks man for everything , gonna buy hover pro for sure to appreciate your dedication and work
Thank you!!! 😁😁
i like your pacing, will come back for sure
Nice stuff, keep it up!!
amazing stuff, thank you!
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?
sir please make more videos like this
life is not what it used to be 10min before
Thank you , keep it up
Excellent, thanks!
You're welcome!
Absolute legend
Thanks for sharing❤
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
im having some issues with the animations flickring
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 !
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?
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
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"
It is usebable to make om scroll highlights link?
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.
first time being the thousandth like 🎉 gg great video
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 🥺
Animations make website slower 🦥