Jump to content


Question about dynamic tweens and GSDevTools

Moderator Tag
Go to solution Solved by GreenSock,

Recommended Posts



Two queries about the GSDevTools.


Query 1:

Easy one to start with. When using the CodePen linked on the GSDevTools page (with the 3x sliding boxes).

See the Pen MEYdxr?editors=0010 by GreenSock (@GreenSock) on CodePen


I experience two issues -

  1. the dropdown doesn't show the currently selected tween and
  2. when selecting "grey" it actually shows the orange tween.

Is this normal / expected? I'm probably just misunderstanding something...


See video attachment



Query 2:

What is best approach to using dynamically generated tweens with GSDevTools. I have boiled it down to a very basic case here:


`updateList` is undocumented, and I don't think I'm using it correctly. I tried recreating the GSDevTools after each button click, but that also errors out with _.dur is not defined.

Is there a preferred way to using GSDevTools with tweens that are built on the fly?





See the Pen rNjyvwp?editors=1010 by chrisk7777 (@chrisk7777) on CodePen

Link to comment
Share on other sites

Query 2: I'm not sure if there is any more updated info but this post contains info  on using with dynamic content:



  • Like 2
Link to comment
Share on other sites

Nice one Visual-Q. I'll have a poke around and get back with an update using that approach

Link to comment
Share on other sites

Thanks again @Visual-Q .

I had a play with that approach and got something going that works in my particular use case:

See the Pen xxgdRbM?editors=0010 by chrisk7777 (@chrisk7777) on CodePen


const DevTools = (() => {
  let instance = null;

  return {
    scrubber: (animation) => {
      if (instance) {
      instance = GSDevTools.create({ animation });

// Usage
const t = gsap.fromTo(".grey", { rotate: 0 }, { duration: 1, rotate: 360 });
DevTools.scrubber(t); // Or an id


Link to comment
Share on other sites

  • Solution
21 hours ago, Chris7777 said:
  • the dropdown doesn't show the currently selected tween and

Fixed. All the "duration" values had a typo ("duratoin"). 🙄


21 hours ago, Chris7777 said:
  1. when selecting "grey" it actually shows the orange tween.

Good catch. It's fixed in the next release which you can preview on CodePen at https://assets.codepen.io/16327/GSDevTools3.min.js (the same file you linked to, so just clear your cache). It'd only be an issue if you don't define an "animation" for the GSDevTools instance (thus it uses the globalTimeline) AND the selected animation had a delay applied. Thanks again for pointing that out. And you get major bonus points for even providing a video! 👏


And yeah, you can just kill() the instance and create a new one. The method you used looks great. If it's easier (and I can't imagine it would be), you could also just use id values. Like you can set an "id" in the config, and then to snag it you can use GSDevTools.getById(id) and then just kill() it there. I'm not suggesting a change - I'm just being thorough about your options. :)


Thanks for being a Club member, @Chris7777 🙌

  • Like 1
Link to comment
Share on other sites

Cheers Jack! No worries about the typo's, 90% of my bgus bugs are spelling mistakes... 

Thanks for the extra approaches there, makes sense. I'll adjust my snippet to match up - always good to know of some alternatives.


My pleasure, easily the most "bang for buck" paid software that I use.

  • Thanks 1
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.