Jump to content
Search Community

GSDevTools Not picking up my IDs

Yashi-2 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

Hi, I just plugged GSDevTools to my js file, but GSdevtools not picking up my timeline IDs, and also it default to Global Timeline and continue to play till 90.00sec. why is that?

 

function gotoNext($out, $in) {
    var tl = new TimelineMax({ id: "sliderOut" }),
      $slide_left = $out.find(".slider-left"),
      $slide_svg_path = $out.find(".svg-bg > .svg-bg-left"),
      $slide_name = $out.find(".slider-project-name"),
      $slide_desc = $out.find(".slider-description"),
      $slide_tech = $out.find(".slider-tech > ul li"),
      $slide_right = $out.find(".slider-right"),
      $slide_static_name = $out.find(".slider-static-title"),
      $slide_on = $out.find(".slider-no"),
      $slide_img = $out.find(".slider-img");

    tl
      .set($in, { autoAlpha: 1, className: "+=active" })
      .set($out, { className: "-=active" });
  
  	// other tweens
  }

GSDevTools.create({
    id:"#sliderOut"
  });

 

Link to comment
Share on other sites

ok, I'll post a demo. one thing I've noticed. if my timeline is inside a function. I cant access to that timeline from outside. right? I think that's the problem. my timeline is inside a gotoNext function so GSDevTools cant access to that timeline. I guess.

Link to comment
Share on other sites

It looks like you should be specifying the animation property in the constructor like so:

 

GSDevTools.create({
    animation:"sliderOut"
  });

 

You use the id of your timeline to specify which animation you want GSDevTools to control.

 

The confusing part is that animations can have ids and instances of GSDevTools can have ids.

 

The id property of a GSDevTools instance is defined as:

 

  • id [string] - a unique string to identify the GSDevTools instance. The persistent values between refreshes are mapped to this id, so if you ever run into a case where there's cross-contamination of the persistent values (like if you embed multiple codepens on one page and don't want timeScale changes in one to affect the others on refresh), just make sure you give each one a unique id.

https://greensock.com/gsdevtools

 

Since you can technically have multiple instances of GSDevTools on a page, you can assign each one its own id to make it easier to manage which settings persist on refresh. You will probably rarely ever need to use the id property in the create() method, but in case you do it might look like this:

 

GSDevTools.create({
  animation:"banner1",
  id:"banner1Tools"
})

GSDevTools.create({
  animation:"banner2",
  id:"banner2Tools"
})

 

Each instance has its own animation and its own id.

 

 

 

 

  • Like 3
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...