L Waterfield

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.

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'})

Here's a cut down demo: https://codepen.io/lwaterfield/pen/WNLOoYE You can see clicking the nav dots works, but as you scroll through the animation they don't change.

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...

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

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!