Active nav-item styling using both scrollTrigger and click

[maihienhoaphat 1 Likes (Newbie)]

Thanks much, this is what I am in case.

[Araf Hossain 1 Likes (Newbie)]

5 minutes ago, maihienhoaphat said:

Thanks much, this is what I am in case.

Then we are in the same page  cool. 

[Sonya.Ninja 0 Likes (Newbie)]

On 6/18/2020 at 10:59 PM, ZachSaucier said:

Hey Sonya and welcome to the GreenSock forums.

 

You should use your developer tools console (F12) to check for errors. Opening it up for your pen I see "Uncaught TypeError: ALL_FUNCTIONS.sectionOne is not a function". I'm guessing those are additional animations that you took out for the sake of the demo (thanks for doing that).

 

FYI we recommend using the GSAP 3 way of formatting. For more about that check the GSAP 3 migration guide.

 

The main issue is that you're using an older version of ScrollTrigger that has a bug related to zero duration timelines with ScrollTriggers. Update the file to version 3.3.3 and it will animate some. 

 

But you'll still need to change your code a bit because you need a way to animate back to the previous section on reverse. I might do it by calling your method with the previous item - something like this: tl.call(ALL_FUNCTIONS.styleTheNav, [prevmenuitem]); - before you call the item that shows for that section. That way when you reverse it it'd call the previous one second. If you have overwrite: "auto" on those tweens, it should animate the way you want. I'd also recommend a toggleActions of toggleActions: "play none none reverse".

 

I noticed that you tried to use the position parameter on non-timeline tweens. That won't work because the tweens have nothing to position them in regards to.

 

Happy tweening.

Hi Zach!

Thanks again for the explanation. I followed your advice:  updated the gsap version, changed my syntax to use the  GSAP 3 way of formatting,  put all tweens in a tl so that the position parameter works. The pen is updated and seems to be working (sort-of).

 

- I realised that removing the 'active styling' from all the nav items before applying the active styling to the current item was a bit redundant (and very confusing) when I can simply reverse the animation. (A bit like a double negative.)

 

I'm still trying to figure out how to do this:

 

CLICK

- Animate the nav styling only once - before scrollto

 

SCROLL

- Animate the nav styling for each section

 

I'd be grateful if you could point me in the right direction.

Thanks!

 

 

See the Pen zYrYgzy by sonya-ninja (@sonya-ninja) on CodePen

 

 

 

 

 

 

 

 

[ZachSaucier 7,118 Likes (Superhero)]

On 6/20/2020 at 10:50 PM, Sonya.Ninja said:

I'm still trying to figure out how to do this:

 

CLICK

- Animate the nav styling only once - before scrollto

You'd need to disable the ScrollTriggers for the navigation items in between during the transition. It's doable but likely more work than it's worth. Why not keep the animations playing as they do now?

 

On 6/20/2020 at 10:50 PM, Sonya.Ninja said:

SCROLL

- Animate the nav styling for each section

Not sure what you mean here. The nav styling is already updating when you scroll to each section?

[Sonya.Ninja 0 Likes (Newbie)]

6 hours ago, ZachSaucier said:

You'd need to disable the ScrollTriggers for the navigation items in between during the transition. It's doable but likely more work than it's worth. Why not keep the animations playing as they do now?

 

Not sure what you mean here. The nav styling is already updating when you scroll to each section?

 

Okay thanks. I don't want more work than it's worth!