Jump to content
Search Community

GSAP for React

JasonD test
Moderator Tag

Recommended Posts

I'm sure I'll catch some heat for this, but I'm a little worried about GSAP in the future and if I'll even reach for it anymore.  The biggest change has been FramerMotion for React. Making it SUPER EASY to bring animation into a react project.   I can see myself reaching less and less for GSAP in the future.  Many FED's have never even heard of GSAP these days.

While I love the new ScrollTrigger plugin, it feels like this might be the last breath for this library.  Now, I get it. The old guard is probably rolling their eyes at this post, but for those of us just swinging around to React, finding high quality React + GSAP tutorials is pretty rare.  Couple that with FramerMotion right now. (Which is EVERYWHERE) and the ease and power that comes with it, and this post feels timely.

 

When the GreenSock crew was announcing something big, this was actually what I was hoping for.  I'm not ungrateful for ScrollTrigger - it's exciting, but imagine...again, sorry - I don't work for these guys - FramerMotion offering a ScrollTrigger in their library for React.  Yikes.

 

Anyway, I would love to hear if there are plans for this sort of thing in the future.

 

Thanks in advance

Link to comment
Share on other sites

Hey BrownsFanForLife. Thanks for posting. However, I'd like some additional information from you as most of your comments seem fairly abstract to me.

 

22 minutes ago, BrownsFanForLife said:

if I'll even reach for it anymore

What about FramerMotion makes it more appealing than using GSAP? What makes it easier? The fact that it has more tutorials on how to use it than there are GSAP in React articles?

 

As a side note, we're aware of another React + GSAP course currently being made.

 

22 minutes ago, BrownsFanForLife said:

Many FED's have never even heard of GSAP these days.

I haven't found this to be the case. Almost every FED I've met not only knows about GSAP/GreenSock but is very pleased with GSAP.

 

22 minutes ago, BrownsFanForLife said:

it feels like this might be the last breath for this library

What makes you say that? To shed some transparency, GSAP is more widely used than ever and GreenSock as a company is doing better than ever (to my knowledge at least). And we have plans for of how to continue to do even better going forward. Pretty much every major web animator recommends GSAP. GSAP is used on around half of new award winning websites. That's pretty great market share if you ask me.

 

22 minutes ago, BrownsFanForLife said:

imagine...again, sorry - I don't work for these guys - FramerMotion offering a ScrollTrigger in their library for React.  Yikes.

What if they do? The more good tools the better :) 

 

22 minutes ago, BrownsFanForLife said:

I would love to hear if there are plans for this sort of thing in the future.

What do you mean "this sort of thing"? Do you mean a React-specific library? If so, there are no plans at the moment. We are quite at capacity for what we're able to do with just the JavaScript version of GSAP. Given it works great in React contexts, it doesn't make much sense for us to go all in on React instead. It's just one framework (albeit a widely used one) and isn't my personal favorite to work with. Plus there's react-gsap if you want something that feels more like React.

  • Like 5
Link to comment
Share on other sites

1 hour ago, BrownsFanForLife said:

Couple that with FramerMotion right now. (Which is EVERYWHERE)

 

This is the first I've heard of Framer Motion. Looks like Framer acquired Popmotion, which has been around for a while, so nothing really new. Just a slightly different syntax.

 

Writing declarative animation code is fine for simple stuff, but writing complex, sequenced animations in JSX can get messy. Simple examples using react-gsap. I'm not sure this an improvent over imperative code. 🤷‍♂️

https://bitworking.github.io/react-gsap/src-components-timeline

 

I don't even know if you can do timelines in Framer Motion, but timelines is definitely where gsap beats out other animation libraries.

 

But you should use the right tool for the job. Perhaps Framer Motion is a better fit for the type of stuff you do. 

 

  • Like 4
Link to comment
Share on other sites

@BrownsFanForLife don't worry - you won't get flamed here for bringing this up.

 

Like Zach, I'm genuinely curious about what makes you less inclined to use GSAP in your React projects. What changes could be made that would cause it to be your go-to tool? What's the dream API? Perhaps there's some sort of React wrapper that could be built around GSAP to make it feel more at home in that environment(?) I imagine that's what react-gsap does.

 

In case it's not already obvious, I'm not at all a React guy (or any framework), so it could be helpful to hear from an "insider" about what might be discouraging folks in that community from using GSAP. 

 

I've seen some "dream API's" suggested to fit with some other tool that frankly feel super cumbersome to do anything except the most basic things. GSAP's API has been crafted to make it quite easy to build complex things. I've seen people want to do declarative code like: 

<component startX="0" endX="300" duration="2"></component>

Which is incredibly limiting. Or sometimes they want a tag for each step in an animation and it just winds up being 300% more code to do anything remotely complex. I'd like to avoid that. 

 

I'd welcome any specific feedback/suggestions you've got. 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...