Why gsap but not framer-motion?

[Poylar]

Hi, i work with react/next.js now, and i dont understand what the main differce between this both lib?

 

framer write for react components

gsap work everywhere

 

but anyway i see a lot of sites witch react + gsap stack.

 

Why?

[GreenSock]

I'm not a big fan of criticizing other animation libraries and I honestly don't know much about framer-motion, but here are some general thoughts (keep in mind this is totally biased):

1. GSAP is framework-agnostic, meaning you can use it ANYWHERE. Literally animate anything that JavaScript can touch. I think framer-motion can only be used in React. So if you learn GSAP, your skillset can transition to any project whereas framer-motion skills will be limited to React projects. 
2. I hear people say that framer-motion is very easy to use in React especially for simpler effects whereas GSAP requires a little bit more of a learning curve due to the way React works (cleanup, code structure that it requires, etc.) However, once you see how it's done (see https://gsap.com/react), it's really not hard. We released a useGSAP() hook specifically for React users to automate the cleanup tasks and make it very easy. My guess is that framer-motion's syntax feels more "React-y" for React folks that are already used to that ecosystem. GSAP's syntax is universal. 
3. GSAP has a lot more capabilities. Timelines, morphing, flip, SVG, runtime controls, blah, blah - basically, animators can feel very confident that whatever the client asks for will be possible with GSAP. It's robust and super flexible.
4. GSAP has a very long track record of ongoing support and innovation. These forums have almost 200,000 posts and we've been around for 15+ years. We've got a funding mechanism in place (Club GSAP) to ensure that the project is safe. Trust is a big deal when you build on an animation framework - you wanna be confident that when you run into an issue/question, people are there to help and the project won't get abandoned. I have no idea how framer-motion compares in that regard...I'm just saying GSAP is solid. A lot of people use framer-motion too so I'm sure you could get questions answered somewhere, I'm just not familiar with where or if there's a funding mechanism that'll help it last for years. 
5. A huge number of the top award-winning sites use GSAP, so the top-tier developers sure seem to like it and there's probably good reason (you'd have to ask them). We hear from many of them that they tried various other animation frameworks and eventually ran into problems and they keep coming back to GSAP because they just trust it. Things "just work" and it gives them a ton of flexibility. Again, I'm not saying framer-motion is bad in this area at all. 
6. I don't know if this is accurate, but I've heard people say that GSAP definitely performs better under load (speed). 🤷‍♂️

I really do hear lovely things about framer-motion in the React community and the author is a very sharp guy. I'm sure that for certain projects, it's a fantastic option. I don't mean to discourage you from using it. But obviously I'm a much bigger fan of GSAP. 💚

 

This page might have some details that'd prove helpful in your decision making (it doesn't compare it with framer-motion specifically; it's more about why a lot of people choose GSAP). 

 

You're probably in good hands either way for most things. 

 

Good luck!

[Poylar]

On 10/27/2023 at 4:25 AM, GreenSock said:

I'm not a big fan of criticizing other animation libraries and I honestly don't know much about framer-motion, but here are some general thoughts (keep in mind this is totally biased):

1. GSAP is framework-agnostic, meaning you can use it ANYWHERE. Literally animate anything that JavaScript can touch. I think framer-motion can only be used in React. So if you learn GSAP, your skillset can transition to any project whereas framer-motion skills will be limited to React projects. 
2. I hear people say that framer-motion is very easy to use in React especially for simpler effects whereas GSAP requires a little bit more of a learning curve due to the way React works (cleanup, code structure that it requires, etc.) However, once you see how it's done (see https://gsap.com/react), it's really not hard. My guess is that framer-motion's syntax feels more "React-y" for React folks that are already used to that ecosystem. GSAP's syntax is universal. 
3. GSAP has a lot more capabilities. Timelines, morphing, flip, SVG, runtime controls, blah, blah - basically, animators can feel very confident that whatever the client asks for will be possible with GSAP. It's robust and super flexible.
4. GSAP has a very long track record of ongoing support and innovation. These forums have almost 200,000 posts and we've been around for 15+ years. We've got a funding mechanism in place (Club GSAP) to ensure that the project is safe. Trust is a big deal when you build on an animation framework - you wanna be confident that when you run into an issue/question, people are there to help and the project won't get abandoned. I have no idea how framer-motion compares in that regard...I'm just saying GSAP is solid. A lot of people use framer-motion too so I'm sure you could get questions answered somewhere, I'm just not familiar with where or if there's a funding mechanism that'll help it last for years. 
5. A huge number of the top award-winning sites use GSAP, so the top-tier developers sure seem to like it and there's probably good reason (you'd have to ask them). We hear from many of them that they tried various other animation frameworks and eventually ran into problems and they keep coming back to GSAP because they just trust it. Things "just work" and it gives them a ton of flexibility. Again, I'm not saying framer-motion is bad in this area at all. 
6. I don't know if this is accurate, but I've heard people say that GSAP definitely performs better under load (speed). 🤷‍♂️

I really do hear lovely things about framer-motion in the React community and the author is a very sharp guy. I'm sure that for certain projects, it's a fantastic option. I don't mean to discourage you from using it. But obviously I'm a much bigger fan of GSAP. 💚

 

This page might have some details that'd prove helpful in your decision making (it doesn't compare it with framer-motion specifically; it's more about why a lot of people choose GSAP). 

 

You're probably in good hands either way for most things. 

 

Good luck!

I would also like to clarify such a thing as animation with mount .
framer-motion has AnimatePresence.
Is it possible to implement this in gsap?

[Rodrigo]

Hi @Poylar,

 

A component similar to Animate Presence is on our todo list, but we haven't been able to complete it just yet.

 

One alternative is to use React Transition Group's Transition component as shown in this modal demo:

https://stackblitz.com/edit/vitejs-vite-vlpbvk?file=src%2FModal.jsx

 

Including React Transition Group does not imples a big impact on either KB size of your app or performance (as you can see in the demo), so is a good and reliable choice for that particular scenario.

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!