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! 🙏🏼
@@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.
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"
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?
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
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 !
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 😬😂😂
Love your videos. No nonsense talk just talking about the topic.
Thank you!! Trying to keep them more concise :)
Found your channel a few days ago and I've been binge watching your stuff. Great content man!
Thank you!! :)
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! 🙏🏼
Yes🚀🔥❤ just the masterclass I've been waiting for
😎
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.
Precise and on-point, as always! 🔥🔥
dude, u are brilliant ! i am hugh fan of framer motion, and thanks for your content
i like your pacing, will come back for sure
Absolutely phenomenal explanations ! 😃
Wonderful tutorial! Thank you 🙏
Make more of this kind of more... I think you are USP is framer motion, so keep making video on it
amazing stuff, thank you!
Nice stuff, keep it up!!
sir please make more videos like this
Thank you , keep it up
Excellent, thanks!
You're welcome!
Absolute legend
life is not what it used to be 10min before
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
Thanks man for everything , gonna buy hover pro for sure to appreciate your dedication and work
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 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
im having some issues with the animations flickring
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"
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?
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.
It is usebable to make om scroll highlights link?
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 !
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 🦥