Ayooo, the way he explains ??? The way he waits for the problem to pop up, and then explain why that is, before fixing it ? That is just GOLD. Great great tutorial.
Actually, with Framer Motion you can avoid extra renders by not using state to update the position, and using the useAnimate hook. By attaching it to a ref, you can continuously update the element’s position in a useEffect hook similar to how you’re doing with GSAP. The good thing is that state won’t be even needed, thus increasing performance.
For sure! Ultimately it depends on the use case. I believe for a small animation like this one, updating state is fine and it makes it easier to maintain and write. But for a performance intensive use case, you're right the useAnimate() hook would definitely be better. Thanks for your input!
OMG THIS CHANNEL IS PURE GOLD; all the questions I have about all the amazing sites I love are solved here, thank you Oliver for your wonderful work. 🤩
Thanks a lot dude you've saved me I've also felt the animation lagging and thought it was because of the continuous recalculations but your solution fixed it
I just wanna say thanks and I love you for creating such a simple explanation tutorial you gained a sub!!, and the way you use react is so good!, I'm improving my react code aswell because of you
Could you make next tutorials on framer motion? I like that cause of simplified code and real life variables like mass, damping, stiffness. It would also help in my portfolio redesign. All The Best, Olivier.
had already toyed a bit with the github repo few days ago, you seem to very oriented into animations and awwwards type of programming, would be nice to see you code a full project of a few hours trying to implement original designs, like trying to win site of the day or something. maybe you don't have time for it, just sending the message out there :)
It’s definitely in my plans! Right now I’m focused on the technical side of making animations but I’m planning on slowly transitioning into showing more of the creative side, showing the whole process that comes with it and going for those awards!
Thank you bro I have learned new concept in framer motion.I am waiting to see a tutorial on page transition in next js 13 only in app directory with framer motion.
Awesome video! Thank you for explanation. I used gsap quite a bit with react. It was my first choice for me as understand it pretty well. Altough the more I use it with react the more I see lots and lots of problems mainly around the life cicle of the react. Lately I've been trying to learn framer motion but for some reason it's hard for me to do xd. I wanted to try it because it build specifically for react, unlike gsap. For example one issue I've encountered using gsap was when I changed the size of a component above my animation, the starting point of the animation stayed the same. For example, I had tabs and a horizontal scroll. If I switched to a tab with more stuff, the gsap animation would start from the wrong place. I fixed it by using a scroll refresh, but the tricky part was that I couldn't refresh just the scroll trigger for the horizontal scroll when I changed tabs. I had to refresh them all, which meant adjusting the timing and delays of the animations to avoid flickering.
I also learned Gsap before Framer Motion so there was definitely a learning curve for me as well. Yep I’ve had similar issues as well with Gsap. I have way less inconsistent behaviour with Framer and there’s no refreshing or anything like that since it’s declarative so that’s great. Cheers!
is there a way to build a homepage with framer and then implement this somehow? Im not that good with code so i could not write a whole homepage with code but if there is a way to implement this or other effects like the revealing circle mask you made a tutorial about into a frame website this would be really cool.
I use both in the same project. I like framer way of writing code but framer is slow for some things(basically animating anything that require low latency with a lot of instances). For example: changing an svg transparency overtime. For some reason framer introduce some fringing effect(it look that the event listener is missing some events with framer while that does not happen with gsap).
Interesting! I never tried to change the transparency of an SVG, but I know the event listener can sometimes skip frames when moving fast. In all cases, thanks for your input!
great work olivier i prefer framer motion. declarative programing the code feel more cleaner and is less work i knew not by much but the effort to tell it to do every thing spicficly is a bit annoying in some cases
Thanks for this video I'm just searching about this ❤❤ let me when you are going to upload the video that I have asked you please send as soon as possible I am waiting ❤❤
nice tutorial, i wonder is there a way to override ease on mouse leave, for example the default will be elastic.out(1, 0.8) and on mouse leave i want it to be elastic.out(1, 0.3)
gsap: you got memory leak because you forgot clear animations framer: you use state that updates every inout tick that's very expensive, your gc will scream :)
As long as you’re not stacking multiple state update it should be fine. Also since it’s on the object itself and not on the window, it reduces the risk of stacking multiple events that trigger multiple state update. But you definitely have to be careful when setting the state continuously like that.
dudeeeeeeee , one suggestion please - can i start off with learning react js , tailwindcss & nextjs ts without making projects in html css js , coz I already made some projects using react & it was completely fine (worried about what if people ask for html css js )
Another amazing content from the best animation tutorial channel, you’re the best man🔥❤️. I need your help, been working on this project and I wanted to try one of your animation videos and I used it, I’m having some errors, idk if you can help or where I can contact you?
![ทางเดินชีวิต - ธีเดช ทองอภิชาติ x อ.ไข่ มาลีฮวนน่า [Official MV]](http://i.ytimg.com/vi/1f3wcG16dd4/mqdefault.jpg)
my man just cleared age old debate
😂
There's no debate ,Framer motion is a clear winner over GSAP by a long margin.
Ayooo, the way he explains ??? The way he waits for the problem to pop up, and then explain why that is, before fixing it ? That is just GOLD.
Great great tutorial.
I was waiting for someone to release tutorials like this with the tech stack you use, thanks for the effort!! This has been really helpful.
Glad you like the videos🤝
Actually, with Framer Motion you can avoid extra renders by not using state to update the position, and using the useAnimate hook. By attaching it to a ref, you can continuously update the element’s position in a useEffect hook similar to how you’re doing with GSAP. The good thing is that state won’t be even needed, thus increasing performance.
For sure! Ultimately it depends on the use case. I believe for a small animation like this one, updating state is fine and it makes it easier to maintain and write. But for a performance intensive use case, you're right the useAnimate() hook would definitely be better. Thanks for your input!
have you implemented this with useAnimate? i tried using useAnimate, and its rather laggy and slow 🥲
Just made a video on the subject: th-cam.com/video/5YB1roFD7Cc/w-d-xo.html
gsap is way more performant if you use imperative method, framer motion will hit its limit sooner than you would expect
OMG THIS CHANNEL IS PURE GOLD; all the questions I have about all the amazing sites I love are solved here, thank you Oliver for your wonderful work. 🤩
Lets goo💯
Your lectures make my weekend lively. Thank you.
Cheers!
you are the man! I am a starting frontend developer, who is looking for his first job! love the video's and you are a great inspiration
glad to hear that! :)
This channel is underrated! So good Olivier!
Appreciate that🙏
if your framer motion magnetic button is bugging its because of the latest versions are making it bug i used ^10.15.1 version and it worked perfectly
Thanks a lot dude
you've saved me
I've also felt the animation lagging and thought it was because of the continuous recalculations but your solution fixed it
This is awesome. I'm happy you did this
Nice! Glad to hear this
I just wanna say thanks and I love you for creating such a simple explanation tutorial you gained a sub!!, and the way you use react is so good!, I'm improving my react code aswell because of you
Glad I could help
Could you make next tutorials on framer motion? I like that cause of simplified code and real life variables like mass, damping, stiffness. It would also help in my portfolio redesign.
All The Best, Olivier.
Working on it!
This is Goldmine, Thanks for sharing
Cheers!
Well done, Framer Motion FTW!
Yes sir💯
@@olivierlarose1 Looking forward for video showcasing the cool new "useAnimate" hook, which lets you create awesome animation sequences
Thanks man love your content ❤
Cheers👊
you are a genius!
I wish I was!
GSAP for life
had already toyed a bit with the github repo few days ago, you seem to very oriented into animations and awwwards type of programming, would be nice to see you code a full project of a few hours trying to implement original designs, like trying to win site of the day or something. maybe you don't have time for it, just sending the message out there :)
It’s definitely in my plans! Right now I’m focused on the technical side of making animations but I’m planning on slowly transitioning into showing more of the creative side, showing the whole process that comes with it and going for those awards!
my man doing rocket science like its kindergarten math
Thank you bro I have learned new concept in framer motion.I am waiting to see a tutorial on page transition in next js 13 only in app directory with framer motion.
Yes waiting for an official way of doing this with framer motion and I’ll make a video for sure!
Awesome video! Thank you for explanation. I used gsap quite a bit with react. It was my first choice for me as understand it pretty well. Altough the more I use it with react the more I see lots and lots of problems mainly around the life cicle of the react. Lately I've been trying to learn framer motion but for some reason it's hard for me to do xd. I wanted to try it because it build specifically for react, unlike gsap.
For example one issue I've encountered using gsap was when I changed the size of a component above my animation, the starting point of the animation stayed the same. For example, I had tabs and a horizontal scroll. If I switched to a tab with more stuff, the gsap animation would start from the wrong place. I fixed it by using a scroll refresh, but the tricky part was that I couldn't refresh just the scroll trigger for the horizontal scroll when I changed tabs. I had to refresh them all, which meant adjusting the timing and delays of the animations to avoid flickering.
I also learned Gsap before Framer Motion so there was definitely a learning curve for me as well.
Yep I’ve had similar issues as well with Gsap. I have way less inconsistent behaviour with Framer and there’s no refreshing or anything like that since it’s declarative so that’s great.
Cheers!
Can you please make longer videos making some complex stuff.
Thing you teach is addictive
Yes for sure! Thanks for the feedback🤝
sorry for adding links, love your videos 🔥🔥🔥🔥🔥🔥🔥
Glad you like them!
i seems broken to me, the animation loses velocity everything state updates, how do i fix that? :(
More like this 👀👀
Noted ✍️
For me both are complicate to learn , I do all my animation by scratch only with Js and CSS , I find it very easy
is there a way to build a homepage with framer and then implement this somehow? Im not that good with code so i could not write a whole homepage with code but if there is a way to implement this or other effects like the revealing circle mask you made a tutorial about into a frame website this would be really cool.
Framer motion one doesn't work as of now. It's super buggy and not smooth
Letssss goooowwwww🎉🎉🎉🎉
Thanks for the support!
Thanks for this video
My pleasure :)
hey man, i love the sound quality in your videos. As someone who is looking for a good microphone, could you let me know the one u use please?
Thanks! I use a blue yeti
I use both in the same project. I like framer way of writing code but framer is slow for some things(basically animating anything that require low latency with a lot of instances). For example: changing an svg transparency overtime. For some reason framer introduce some fringing effect(it look that the event listener is missing some events with framer while that does not happen with gsap).
Interesting! I never tried to change the transparency of an SVG, but I know the event listener can sometimes skip frames when moving fast. In all cases, thanks for your input!
We are waiting for serise, learning animation from top to bottom
Yes sir 💯
great work olivier i prefer framer motion. declarative programing the code feel more cleaner and is less work i knew not by much but the effort to tell it to do every thing spicficly is a bit annoying in some cases
Well said 💯
Thanks for this video I'm just searching about this ❤❤
let me when you are going to upload the video that I have asked you please send as soon as possible I am waiting ❤❤
🤝will do
👌🤔
nice tutorial, i wonder is there a way to override ease on mouse leave, for example the default will be elastic.out(1, 0.8) and on mouse leave i want it to be elastic.out(1, 0.3)
Yes you can create a xEnter(), yEnter() and xLeave(), yLeave() instead of xTo and yTo
@@olivierlarose1 oh as a function interesting 🤔
gsap: you got memory leak because you forgot clear animations
framer: you use state that updates every inout tick that's very expensive, your gc will scream :)
is there a performance hit on the framer example for the constant state updates?
As long as you’re not stacking multiple state update it should be fine. Also since it’s on the object itself and not on the window, it reduces the risk of stacking multiple events that trigger multiple state update. But you definitely have to be careful when setting the state continuously like that.
dudeeeeeeee , one suggestion please - can i start off with learning react js , tailwindcss & nextjs ts without making projects in html css js , coz I already made some projects using react & it was completely fine (worried about what if people ask for html css js )
It’s all good, you should learn css tho it’s a good skill to have and you can’t expect all projects to be using tailwind
@@olivierlarose1 🥺 thankss a ton , you're great
Bro please how did u get so good at framer motions?? i want to get good but the docs are so trash
Blood sweat and tears💯but honestly it’s just a lot of practice and playing around with things
@@olivierlarose1 thanks for the reply bro, the framer motions are still bad tho lol
Keep working at it💯
Hey yo.
i will go with framer personally
🤝same here in most cases
i will prefer framer motion tho
Same for me in most cases!
Gsap 😢
I know🥲
Bro please the next time, make your videos a bit slower, everything is fast and difficult to follow some steps, thank you 🙏
Noted✍️
Great video brother :)
Thank you👊
Another amazing content from the best animation tutorial channel, you’re the best man🔥❤️.
I need your help, been working on this project and I wanted to try one of your animation videos and I used it, I’m having some errors, idk if you can help or where I can contact you?
Come on discord!
Great video .. as always. 🔥
Love. To se you making clone of this portfolio (regisgrumberg).
Thanks.. 🎉
Noted✍️
why use one when you can do two🤌
Haha why not both🤷♀️
@@olivierlarose1 exactly, it has pros and cons after all. feel free to chose the suitable one.
Thats it 💯