Jump to content
Search Community

GSDevTools: Refreshing after creation not working

SimonWidjaja test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

First of all: Loving the GSDevTools!

But I am facing a problem. It seems to only work properly when I call GSDevTools.create() when all timelines are set up already. I have to modify the timelines/values at runtime (after GSDevTools.create() was called). I was digging through the source code without any luck. 

 

I stumbled upon the two functions updateList() and update(). Both sounded promising at first, but didn't do the job.

 

// Timeline One
var tl1 = new TimelineLite({id: 'one'})
tl1.to(".orange", 1, {x:700})
  .to(".green", 2, {x:700, ease:Bounce.easeOut})


// Timeline Two
var tl2 = new TimelineLite({id: 'two'})
tl2.to("h1", 1, {x:100, ease:Bounce.easeOut});


// Create DevTools
var myDevTools = GSDevTools.create();


// Add Timeline Three after 2s
setTimeout(function() {
  var tl3 = new TimelineLite({id: 'three'})
  tl3.to(".grey", 1, {x:200, ease:Bounce.easeOut});
  
  // Some desperate attempts ;)
  // All not working. Timeline 'three' will never be shown
  myDevTools.updateList();
  myDevTools.update();
  
}, 2000);

 

Question(s):

  • Is a runtime refresh not supported yet? Or what am I doing wrong?
  • Is there any workaround to e.g. destroy the current DevTools and recreate them from scratch again?

 

Thanks in advance and guys... keep up the amazing work!

 

Simon

[Huge GSAP Fan]

 

See the Pen GOGyMb by anon (@anon) on CodePen

Link to comment
Share on other sites

Here is the reply by @GreenSock in another thread.

 

Quote

Hm, I haven't tried that but in theory it should work as long as you're loading it quickly enough. It really needs to be in place on the first tick so that it can hijack the root timeline and "record" things properly. It basically records any animations that are created within the first 2 seconds of the page loading. 

 

Let us know if you run into any trouble. 

 

 

At the moment I don't think there are any methods to update GSDevTools, but it seems like useful feature so maybe it will get added in future.

 

I tried to change your pen and redefined variable after timeout but like Jack says it only records anything created in first 2 seconds (probably few milliseconds less than 2 seconds in practical use).

 

See the Pen QOxQLg?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 1
Link to comment
Share on other sites

thanks for the quick reply.

Setting up all timelines within this brief setup timeframe is NOT possible in my case. It will be user generated, so there will be updates to the timeline (or new timelines) a LONG time after the init phase. :(

 

Is there any clean way to fully destroy an GSDevTools instance? So I could destroy and recreate it after EVERY modification?

Link to comment
Share on other sites

@GreenSock or @Carl will have to respond to it.

 

I think it will be a impossible hack it and add feature to destroy and recreate it at the moment. When Jack says record, I guess there is some kind of timeout until when GSDevTools records any timelines, there has to be a good reason that we are not given option to change this record time span. Even if you manage to destroy and recreate, you will have to start recording before you create new timelines. After that you will lose access to all previous recorded timelines. But I am just guessing.

  • Like 1
Link to comment
Share on other sites

Thank you so much for looking into it.

I was spending more time trying to solve this problem yesterday, but it seems that I cannot use the GSDevTools as is in my case.

My feature requests would be:

  • update method to be able to see dynamically changed timelines
  • or a way to reset GSDevTools and add/register timelines manually (e.g. GSDevTools.clear().registerTimeline(myTimlineLiteInstance);)
  • or methods to entirely destroy and recreate the GSDevTool instance any time

...just my thoughts ;)

Link to comment
Share on other sites

  • 2 weeks later...

Great suggestions, @mail. And sorry it took a while to respond. 

 

You can actually update the animation that's selected anytime, like:

 

var dt = GSDevTools.create({...});
//then later...
dt.animation(yourAnimation);


It does only record whatever is created in the global timeline within the first 2 seconds after being loaded (it seemed wasteful to go much beyond that) but if you set the animation to a particular timeline and turn off globalSync, it should update just fine even if you make those changes well beyond the first 2 seconds. 

 

Nevertheless, in light of your suggestions, I made the following changes to this beta (unreleased) version that's only usable on codepen right now: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools-latest-beta.min.js

  1. New GSDevTools.globalRecordingTime static property which is the time (in seconds) that it should record animations in the global scope. The default is 2, but you can set it to something else within the first 2 seconds to push it beyond that if you prefer, like GSDevTools.globalRecordingTime = 10; It's very unlikely that this will be necessary though. 
  2. New instance-level kill() method that destroys the instance. So you can do: 
    var dt = GSDevTools.create({...}); 
    //then later...
    dt.kill();
    And of course you can create as many instances as you want. 

Again, don't feel like you need to settle for the global timeline thing - I find that it's often extremely useful to link a GSDevTools instance directly to a particular timeline (and make sure you turn off globalSync) like: 

GSDevTools.create({
  animation:myTimeline,
  globalSync:false
});

 

And then if you make changes to myTimeline, it's typically reflected. 

 

Please let me know if everything works the way you'd expect. Once I get confirmation, I can update the "official" one that's not locked to codepen. 

 

Thanks again for the suggestions. 

  • Like 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.
×
×
  • Create New...