my man just cleared age old debate

@olivierlarose1

11 ай бұрын

😂

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.

@olivierlarose1

11 ай бұрын

Glad you like the videos🤝

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. 🤩

@olivierlarose1

11 ай бұрын

Lets goo💯

Your lectures make my weekend lively. Thank you.

@olivierlarose1

10 ай бұрын

Cheers!

This is awesome. I'm happy you did this

@olivierlarose1

11 ай бұрын

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

@olivierlarose1

6 ай бұрын

Glad I could help

This channel is underrated! So good Olivier!

@olivierlarose1

10 ай бұрын

Appreciate that🙏

This is Goldmine, Thanks for sharing

@olivierlarose1

10 ай бұрын

Cheers!

Thanks man love your content ❤

@olivierlarose1

11 ай бұрын

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

@olivierlarose1

11 ай бұрын

glad to hear that! :)

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.

@olivierlarose1

11 ай бұрын

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!

@ssan4777

11 ай бұрын

have you implemented this with useAnimate? i tried using useAnimate, and its rather laggy and slow 🥲

@olivierlarose1

11 ай бұрын

Just made a video on the subject: kzread.info/dash/bejne/Z412k9Sodqedc8Y.html

@zenova9926

9 ай бұрын

gsap is way more performant if you use imperative method, framer motion will hit its limit sooner than you would expect

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.

@olivierlarose1

11 ай бұрын

Working on it!

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.

@olivierlarose1

11 ай бұрын

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!

Well done, Framer Motion FTW!

@olivierlarose1

11 ай бұрын

Yes sir💯

@filippapiernik9737

11 ай бұрын

​@@olivierlarose1 Looking forward for video showcasing the cool new "useAnimate" hook, which lets you create awesome animation sequences

you are a genius!

@olivierlarose1

11 ай бұрын

I wish I was!

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.

@olivierlarose1

11 ай бұрын

Yes waiting for an official way of doing this with framer motion and I’ll make a video for sure!

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

@siddhukolipaka6783

Ай бұрын

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

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 :)

@olivierlarose1

11 ай бұрын

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!

Letssss goooowwwww🎉🎉🎉🎉

@olivierlarose1

11 ай бұрын

Thanks for the support!

sorry for adding links, love your videos 🔥🔥🔥🔥🔥🔥🔥

@olivierlarose1

11 ай бұрын

Glad you like them!

GSAP for life

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?

@olivierlarose1

11 ай бұрын

Thanks! I use a blue yeti

my man doing rocket science like its kindergarten math

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).

@olivierlarose1

11 ай бұрын

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!

More like this 👀👀

@olivierlarose1

11 ай бұрын

Noted ✍️

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.

Thanks for this video

@olivierlarose1

11 ай бұрын

My pleasure :)

Can you please make longer videos making some complex stuff. Thing you teach is addictive

@olivierlarose1

11 ай бұрын

Yes for sure! Thanks for the feedback🤝

i seems broken to me, the animation loses velocity everything state updates, how do i fix that? :(

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 ❤❤

@olivierlarose1

11 ай бұрын

🤝will do

For me both are complicate to learn , I do all my animation by scratch only with Js and CSS , I find it very easy

Great video brother :)

@olivierlarose1

11 ай бұрын

Thank you👊

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)

@olivierlarose1

11 ай бұрын

Yes you can create a xEnter(), yEnter() and xLeave(), yLeave() instead of xTo and yTo

@amined801

11 ай бұрын

@@olivierlarose1 oh as a function interesting 🤔

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

@olivierlarose1

11 ай бұрын

Well said 💯

👌🤔

is there a performance hit on the framer example for the constant state updates?

@olivierlarose1

11 ай бұрын

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.

We are waiting for serise, learning animation from top to bottom

@olivierlarose1

11 ай бұрын

Yes sir 💯

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 :)

Framer motion one doesn't work as of now. It's super buggy and not smooth

Hey yo.

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 )

@olivierlarose1

11 ай бұрын

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

@ashuu9257

11 ай бұрын

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

@olivierlarose1

11 ай бұрын

Blood sweat and tears💯but honestly it’s just a lot of practice and playing around with things

@faisalabdulkadir9439

11 ай бұрын

@@olivierlarose1 thanks for the reply bro, the framer motions are still bad tho lol

@olivierlarose1

11 ай бұрын

Keep working at it💯

i will go with framer personally

@olivierlarose1

11 ай бұрын

🤝same here in most cases

Gsap 😢

@olivierlarose1

11 ай бұрын

I know🥲

i will prefer framer motion tho

@olivierlarose1

11 ай бұрын

Same for me in most cases!

Bro please the next time, make your videos a bit slower, everything is fast and difficult to follow some steps, thank you 🙏

@olivierlarose1

11 ай бұрын

Noted✍️

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?

@olivierlarose1

11 ай бұрын

Come on discord!

Great video .. as always. 🔥 Love. To se you making clone of this portfolio (regisgrumberg). Thanks.. 🎉

@olivierlarose1

11 ай бұрын

Noted✍️

why use one when you can do two🤌

@olivierlarose1

11 ай бұрын

Haha why not both🤷‍♀️

@devyb-cc

11 ай бұрын

@@olivierlarose1 exactly, it has pros and cons after all. feel free to chose the suitable one.

@olivierlarose1

11 ай бұрын

Thats it 💯