Jump to content
Search Community

Using Gsap like React-Spring?

Rick May test
Moderator Tag

Recommended Posts

Can GSAP function like React-Spring?  I.e.  you set the mass, tension, friction, etc of an element and give it an endpoint and the timing is taken care of?   I'm starting to find myself using react-spring more and more because of its simplicity, but I'd rather just use Gsap for everything.

 

https://www.react-spring.io/docs/hooks/basics

 

Thanks

 

Link to comment
Share on other sites

If I'm not mistaken, that plugin takes an initial velocity and the ending position changes depending on that velocity...?

 

Lets say you have an element that starts at 0.  And you want it to get to 100.  Is there a way to tell Gsap to animate from 0 to 100 without a defined length of time?  It would accelerate from 0, overshoot, and settle at 100 based on friction, mass, etc?

 

Thanks,

Rick

 

 

Link to comment
Share on other sites

Yep, InertiaPlugin will handle the gliding to a halt, including overshoot, but it doesn't accelerate things initially. This probably wouldn't be too hard to do via a plugin if it's really important for you to be able to do that type of motion. I don't have the time right this second to work on that, but it's totally doable within the GSAP ecosystem. Here's a video that covers how to create a simple plugin in GSAP 3: 

 

  • Like 1
Link to comment
Share on other sites

Thanks guys.  Unfortunately,  I'm not seasoned enough to write a plugin to get that functionality.    I just wanted to make sure it wasn't something Gsap could do already (out of the box) before heading too far down the react-spring rabbit hole.

 

Thanks.

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