GSAP vs Framer Motion for React

Which one should you use in your project? GSAP or Framer Motion? In this video I take a look at the pros and cons of each and which one I would learn first.
0:00 Intro
0:27 GSAP Pros #1: Powerful
1:13 GSAP Pros #2: Versatile
1:50 GSAP Pros #3: Community
2:42 GSAP Pros #4: Timelines
3:36 Biggest problem with GSAP
4:19 FM Pros #1: Declarative
5:43 FM Pros #2: Motion Values
6:08 FM Pros #3: Animate Presence
7:03 FM Pros #4: Small Library
8:54 FM Biggest Problem
9:51 Which one to learn
More animations: blog.olivierlarose.com/
Follow me on Twitter: / olivierlarose_
Discord Channel: / discord
Thanks for watching!
#react #nextjs #awwwards #gsap #framer #motion #threejs

[@LePhenixGD]

Man GSAP is a life saver for sequential animations, I don't think there's any other tool that made it easier to create them

[@fathinfadhil]

i never used gsap but by what you're describing with gsap timeline i think you could do animation sequencing with the useAnimate() hook in framer motion. you'll be able to use the javascript 'await' keyword with it to wait for the animation to finish before continuing to the next animation which i think makes the code easier to read

[@A_M_R_2004]

Love what you do bro, keep focusing on awwwards content❤️

[@ParwinderSingh-te7lb]

Man so much great content I subscribed. And I know ur going to make big on TH-cam and life❤

[@Alex.Shalda]

What a thorough explanation, thank you 🎉

[@Nicolas-vj5zc]

thank you so much! love the video

[@dhruvkaushik2122]

I have learned a lot from you thank you for such wonderful content

[@vemuyaswanth803]

Exactly what I needed 🔥

[@hudsonvini7345]

This dude is, THE DUDE! I learn so much with you, thank you so much, i really appreciate your work bro

[@Astrelune]

man blessed that i found this channel

[@dukeselwood]

Framer Motion has the useAnimate hook for creating timeline animations - is that comparable?

[@aymenbachiri-yh2hd]

Thank you so much

[@giggitygigs]

Thank you for this

[@nellymotion]

Thank you !

[@trebturner]

When is your course coming out? Very excited for it

[@yashsagar734]

thanks

[@taszidizaz4079]

🔥🔥🔥

[@gabrielm4979]

Nice video. Are you planning to create a gsap course from scratch? That would be awesome

[@mhdfirassbarakat6587]

would you please make a crash course video for react framer motion ?

[@ZainAliSiddiqui]

❤❤❤

[@mohammadkhakhsoor2068]

Can you please create a whole Playlist for framer motion ? Step by step tutorial comprehensively

[@FreakyYas]

Please put a detailed video on locomotive smooth scroll or parallax animate I'm struggling or

[@rahulk2723]

He's back!

[@iamahtic]

Goated

[@fokspoks]

If say this short: GSAP is a father, while Framer Motion is a newborn child

[@icefield]

isn't the useAnimate hook from framer motion similar to gsap's timeline? What's timeline from gsap better at?

[@abujessica]

Excellent videos, I love advice that end with "do both" because why NOT
some feel like learning both is a sin
y'all fellas got time to compete with elon musk yet waste it on brittle matters and disregard all the achievements you could've had in your spare time
spare time is truly a bless, not everybody gets to spend it well thou

[@samnmeje3486]

really informational video, please what is the equivalent of framer for vue js

[@okkashaally2115]

Try motion one

[@emirsezer10]

Nice video, thank you, I have a question, please answer me. It is impossible to make a page transition with the Next.js app router. Therefore, is choosing to use the page router the right approach or should transitions be abandoned? What do you think?

[@paakofibamfoquaicoe4193]

Page transitions can be done in the template file. Not sure though, he has a video on it.

[@emirsezer10]

@@paakofibamfoquaicoe4193 Yes, correct entries are made, but exit animations are not made.

[@emirsezer10]

@@paakofibamfoquaicoe4193 Yes, correct entries are made, but exit animations are not made.

[@aayushgupta7839]

Can you create a complete guide/tutorial for gsap with react ?

[@RB_MAFIA]

yeah i need that too

[@AdolfRizzler41]

​@@RB_MAFIAyes shit thank you so much thank you this is just what I need

[@realdaly]

for simple animations from a personal experience I really don't recommend both,
again if your animations were not complicated just code them by yourself or go with a lightweight one like aos (animate on scroll)

[@immipixediter210]

3:09 framer-motion
animate()

[@samiullahsheikh5015]

What about react-spring? What's you thought on it?

[@michaelsousajr]

feel like the learning curve for gsap is a little bit steeper but much more worth it, framer gives me trouble half the time.

[@hijk-l7c]

how and where to learn GSAP?

[@dvkerns]

Any good arguments for or situations in which you ended up using both?

[@DMZT_dhruv]

Missed ya bro, hope you are doing fine 🫂

[@bensal9948]

Brother I love you mr content and its super amazing. I learned a lot from you as I am also just want to become like you. I just want to start my creative developer career please make a video on what only languages I have to study to create awwwards winning websites like you and what languages you have studied and worth for making animation only
.... Please read it out ❤❤

[@ramonbnjmn]

We are waiting for his course

[@Tszyu01]

What does the license look like for GSAP if you’re at a company/business? How does that compare to framer?

[@nothing-tj9eh]

hi can you do a tutorial on page transition using framer motion and app router in nextjs

[@adithnarein8420]

I don't think its possible in app router, I searched a lot for it aswell!

[@jiayizhan967]

Can you create a framer motion course?

[@hijk-l7c]

how and where to learn GSAP?

[@okkashaally2115]

There's "motion one" an alternative to gsap by the "framer motion" team

[@MihirAmanRaj]

Hi bro,
so i have got a task to make a animation
where the page starts with a video and as we scroll down a mask should appear which is zoomed out as we scroll and video is still being played and can be seen through that mask, and when we continue scrolling it the mask goes to a place and is replaced by the logo eventually, any idea on how do it,
i can dm u on discord if u dont get it.

[@aberbaCodes]

I guess I'm learning gsap then 😅

[@mirjalol_nightmares]

bro, are your projects are responsive? cos last time i used your projects but not responsive

[@kakaponick]

react-spring?

[@dung_gl]

Can anyone suggest me some channels that cover awesome content like this one? Thanks

[@tejasgk369]

I just use both in a single proj 😅

[@victormustin2547]

Team Framer!

[@sahilverma_dev]

You're GOD 🔥🔥🔥🔥

[@nishadsvanced7708]

Then what about who created Gsap nad FM ?
AND what about who JS?
ND assembly?

[@picklenickil]

Vanilla js css is best

[@yanngatignol9126]

Framer motion give laggy result sometimes on prod env 👎

[@cjstronger]

I’ve noticed the same thing, even simple things like translateX animations are laggy.

[@realdaly]

agree 100%

[@megamind452]

Why not use both ? I know it will contradict in the codebase and people will say it is not best practice. But if you know what you are doing, then it can work flawlessly in combination . Let me know if I am missing something and I am happy to learn. Thanks

[@shahrozahmed9746]

bundle size of your app will increase

[@megamind452]

@@shahrozahmed9746 by how much?

[@megamind452]

@@shahrozahmed9746 by how much?

[@megamind452]

@@shahrozahmed9746 by how much?

[@megamind452]

By how much?

[@WaldoTheWombat]

Hi! Are you half Asian? 😃

[@divyv20]

Hey Olivier ! I loved this video . I work with entrepreneurs like you who have under 25k subscribers to help them to grow to 100k subscribers in under 12 months with proper systems . I actually helped Chirag to achieve 92k subscribers in under 11 months . Could I do a free audit to see if I can help you do the same ? I just think it's really important that more people see your content and want to help you on that mission .

[@Tracer73866]

gsap is not completely free

[@itsjmendez]

GSAP lacks tutorials, making the developer experience not the best.

[@itsjmendez]

Specially with React & Next.Js