Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Yashi-2

GSDevTools Not picking up my IDs

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 post
Share on other sites

hi @Yashi-2,

 

Try it with - a typo (?):

 

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

 

Kind regards

Mikel

  • Like 1
Link to post
Share on other sites

Hi, @mikel thanks for your feedback.

 

I did that. but that also didn't work. I don't know whats happening. I can only see Global Timeline, cant pick my tween id. it's not showing up

Link to post
Share on other sites

Hi @Yashi-2,

 

A reduced demo with the problem would be helpful ...

 

Mikel

Link to post
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 post
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 post
Share on other sites

Thanks, @Carl . now it's all good.. super cool and super useful tool.. awesome. love it. lot of time-saving and fine-tuning has never been easier like this

  • Like 2
Link to post
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.

×