GSDevTools - Altering values in real time [minor, not urgent]

[Chris7777]

Hi all,

 

This is a minor question, so no urgency. Is there a way with the GSDevTools to alter tween values without refreshing?

 

For example, in this demo GSAP CodePen if I wanted to see the impact of .grey completing at `x:300` instead of `x:700` I would need to alter the code, refresh, and (potentially) loose any other state such as the playhead position.

 

Context: I need to construct an animation with lots of small finicky deltas. About a dozen separate parts with lots of minor movements (almost like skeletal animation).

 

Alternatively, I'm thinking I could possibly rig up dat.gui (https://web.archive.org/web/20200227175632/http://workshop.chromeexperiments.com:80/examples/gui/#1--Basic-Usage) to expose particular variables and feed that back in to gsap but if there is a built in solution that would be much preferred and probably less fiddly that dat.gui.

 

Cheers!

 

 

 

See the Pen MEYxBZ by GreenSock (@GreenSock) on CodePen

[ZachSaucier]

Hey Chris, thanks for being a Club GreenSock member.

 

GSAP tweens and timelines aren't set up to be manipulated much after they're created because doing so would make GSAP a lot less performant. So currently you have two main approaches to doing this sort of thing:

1. Create a UI (using datgui, something else, or custom build it) to allow you to change some values. When the values are changed it destroys the old tweens and timelines and creates a new one with the new values. You could save the time of the old animation and then start the new animation with the same time.
2. Don't create a UI and instead edit your actual code. Use labels or the playhead's time to start the timeline in a certain position so you don't have to re-watch the rest of the animation. Refresh the page after you make your changes. This is definitely the most common approach to doing this sort of thing. 

[Chris7777]

Thanks @ZachSaucier ! I just wanted to double check before going down the wrong track. Makes sense regarding performance, something I had not* considered.

 

Cheers!

Chris