Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Rick May

Using Gsap like React-Spring?

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

 

Share this post


Link to post
Share on other sites

Hey Rick. 

 

It sounds like what you're wanting is something like GSAP's PhysicsPropsPlugin. You have access to it as a Shockingly Green member :) 

 

If you have particular questions about how to use it or an effect that you're wanting to create let us know and we can give more tangible help.

Share this post


Link to post
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

 

 

Share this post


Link to post
Share on other sites

In your situation, if the tween only has access to the target location and a starting acceleration, how would it know where to change acceleration?

Share this post


Link to post
Share on other sites

I see. GSAP's InertiaPlugin could be used for that sort of calculation. 

 

The demo could be recreated mostly with just some .set() calls inside of a mousemove listener. 

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×