Rick May Posted December 3, 2019 Share Posted December 3, 2019 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 More sharing options...
ZachSaucier Posted December 3, 2019 Share Posted December 3, 2019 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. Link to comment Share on other sites More sharing options...
Rick May Posted December 3, 2019 Author Share Posted December 3, 2019 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 More sharing options...
ZachSaucier Posted December 3, 2019 Share Posted December 3, 2019 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? Link to comment Share on other sites More sharing options...
Rick May Posted December 3, 2019 Author Share Posted December 3, 2019 Probably best to show an example... Changing the mass, tension, and friction will determine the length of time, the overshoot, etc. https://codesandbox.io/embed/rj998k4vmm Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 3, 2019 Share Posted December 3, 2019 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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted December 3, 2019 Share Posted December 3, 2019 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: 1 Link to comment Share on other sites More sharing options...
Rick May Posted December 3, 2019 Author Share Posted December 3, 2019 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now