Check whether current label matches

[L Waterfield]

Hello!

 

I've made some navigation dots for an animation to jump to certain labels in the timeline, which works just fine. Now I'm wanting to animate those dots depending on which label the timeline is currently at.

 

I can return the current label with console.log(tl.currentLabel()) but my if statement isn't working:

 

if(tl.currentLabel() == 'endScene2'){ $('#nav2').addClass('current'); } else { $('#nav2').removeClass('current'); }

 

In that example, I'm trying to add the class 'current' to dot id #nav2 if the current label equals 'endScene2'.

 

I'm very much a beginner with jQuery and GSAP, so am I doing something really stupid like not wrapping it in a function or missing some quotes somewhere??

 

Any help greatly appreciated!

[L Waterfield]

I've just decided to do it like this with pure jQuery rather than labels:

 

$(".dot").click(function() {
  var current = $(this)
  $(".dot").not(current).removeClass("current")
  current.toggleClass("current")
  if (current.is('#nav1')) { gsap.to(window, {duration: 3, scrollTo: tl.scrollTrigger.labelToScroll("endScene1")}) }
  else if (current.is('#nav2')) { gsap.to(window, {duration: 3, scrollTo: tl.scrollTrigger.labelToScroll("endScene2")}) }
  else if (current.is('#nav3')) { gsap.to(window, {duration: 3, scrollTo: tl.scrollTrigger.labelToScroll("endScene3")}) }
  else if (current.is('#nav4')) { gsap.to(window, {duration: 3, scrollTo: tl.scrollTrigger.labelToScroll("endScene4")}) }
  else if (current.is('#nav5')) { gsap.to(window, {duration: 3, scrollTo: tl.scrollTrigger.labelToScroll("endScene5")}) }
  else if (current.is('#nav6')) { gsap.to(window, {duration: 3, scrollTo: tl.scrollTrigger.labelToScroll("endScene6")}) }
});

 

Works well enough for my purposes

[L Waterfield]

Revisiting this as the above was fine for clicking a nav dot and doing to the desired label, but I really want to have the nav dots animate depending on which label/how far in the timeline we've scrolled.

 

I've got this to start with, but it's not working:

 

/* Auto animate nav dots */
var currentTime = showcase.time();
if(currentTime <= 2 && currentTime < 8){ $('#nav1').addClass("current") }
if(currentTime >= 8 && currentTime < 22){ $('#nav2').addClass("current") }
if(currentTime >= 22 && currentTime < 30.1){ $('#nav3').addClass("current") }
if(currentTime >= 30.1 && currentTime < 40.2){ $('#nav4').addClass("current") }
if(currentTime >= 40.2 && currentTime < 53.2){ $('#nav5').addClass("current") }
if(currentTime >= 53.2 && currentTime < 57.2){ $('#nav6').addClass("current") }

The output of showcase.labels is as follows:

/*
endScene1: 2
startScene2: 8
endScene2: 22
endScene3: 30.1
endScene4: 40.2
startScene5: 48.2
endScene5: 53.2
endScene6: 57.2
*/

Does anyone know a way to do this? Trying to see whether showcase.currentLabel was a match and adding a class based on that didn't work, and doing it with time stamps instead (as above) doesn't work either, #nav1 just stays as "current" the whole time...

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[L Waterfield]

1 hour ago, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen

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

by GreenSock (@GreenSock) on CodePen

 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

 

Here's a cut down demo: 

See the Pen WNLOoYE by lwaterfield (@lwaterfield) on CodePen

 

You can see clicking the nav dots works, but as you scroll through the animation they don't change.

[L Waterfield]

I've decided to animate the nav dots as part of the main animation itself by adding this in at the start of each scene:

 

.to("#nav1", {className:'dot'})
.to("#nav2", {className:'dot current'})

 

[GreenSock]

Hi @L Waterfield. I'm curious why you thought that was a solution. You can't animate to a className like that. 

 

Also, whenever you find yourself making tons of "if/else" statements like that or lots of the same code for every section, it's a clue that you could probably simplify it a lot with some loops or functions. Here's how I'd do it: 

 

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

 

Notice you could add as many sections/dots as you want, and you don't need to touch any of the code. It automatically adjusts. 

 

Does that help? 

[L Waterfield]

11 hours ago, GreenSock said:

Hi @L Waterfield. I'm curious why you thought that was a solution. You can't animate to a className like that. 

 

Also, whenever you find yourself making tons of "if/else" statements like that or lots of the same code for every section, it's a clue that you could probably simplify it a lot with some loops or functions. Here's how I'd do it: 

 

 

 

 

Notice you could add as many sections/dots as you want, and you don't need to touch any of the code. It automatically adjusts. 

 

Does that help? 

Thanks so much! That's definitely what I was after, much more logical code haha. In terms of why I thought the way I did it was a solution - it worked. Changing the className worked for me, but I guess it's not supposed to? That's interesting!

 

Thank you again.