Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sonya.Ninja

Active nav-item styling using both scrollTrigger and click

Recommended Posts

Hi there!

 

I'm a newbie - been struggling to get this working for a week now.

 

I've created a function that animates the styling of the clicked nav-link.

I also created a timeline with a scroll trigger that is supposed to call the same function when each section scrolls into view. (This is the part that's not working.)

 

I think my mistake has something to do with scope?  Sorry - I don't even exactly know what that means.

The reason I think that, is because when I put the nav styling tweens directly into the Nav Animation timeline, then the animation works.

 

If there is a more efficient way to achieve this please tell me.

 

Thanks so much!

 

Sonya.

 

PS. I did manage to achieve the nav styling using scrollTrigger's toggleClass, but animating the style with css does not look as smooth.

See the Pen zYrYgzy?editors=1010 by sonya-ninja (@sonya-ninja) on CodePen

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Thanks so much for all the advice Zach!

 

I don't understand some of what you said, but I'll go through your points one at a time and implement them.

 

You rock!

 

Oh... and yes, I removed some of the animations to make the pen simpler and forgot to remove them from the main timeline.

Link to comment
Share on other sites

1 hour ago, 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.

Hey,

 

Would you please tell me how to do the same thing when scroll and I setup the GSAP3. But I could not do this thing. I want as she wants. I solved the previous problem now I am facing with this problem.

My codepen url:

See the Pen Yzwpevj by arafnoob (@arafnoob) on CodePen

 

 

I have tried this links:

 

 

Link to comment
Share on other sites

42 minutes ago, ZachSaucier said:

Sure, here ya go:

 

 

GSAP3 forum is more faster than I thought. 

Link to comment
Share on other sites

I don't know why "ScrollToPlugin" is not working, Everything is working fine. When I click on any Side navigation "a" , it's not working.

Here is my live site link: http://araf.dynamicflowdev.com/

Before you gave me this solution I have tried this. 

See the Pen mdVROOX by arafnoob (@arafnoob) on CodePen

 

But I have tried yours. As your code everything is working fine. But when I click on any link. It doesn't move. 

Link to comment
Share on other sites

Please make a minimal demo if you'd like our help debugging :) 

Link to comment
Share on other sites

6 minutes ago, ZachSaucier said:

Please make a minimal demo if you'd like our help debugging :) 

 

I had made it. And you know that. It works fine in codepen. But not working on my site. 😕 I don't know why??????????????????????

Link to comment
Share on other sites

On my phone now. Check the console. Also did you realize that I changed the HTML and CSS some?

Link to comment
Share on other sites

By the way when I place "document" instead of "window" it works fine. Here is a example.

gsap.to(window, {scrollTo: i * innerHeight});

Now placing document. 

gsap.to(document, {scrollTo: i * innerHeight});

 

  • Like 1
Link to comment
Share on other sites

3 minutes ago, ZachSaucier said:

On my phone now. Check the console. Also did you realize that I changed the HTML and CSS some?

I have seen all of those HTML & CSS changes. I have seen my console too. When i click on the links there is no error. I have seen tons of examples and tons of site :-( .. Feeling soooo lonely. 

 

Sorry for disturbing when you available on your PC then please check this site. http://araf.dynamicflowdev.com/

Link to comment
Share on other sites

Why not just use the document instead then?

Link to comment
Share on other sites

Just now, ZachSaucier said:

Why not just use the document instead then?

When I use "document", sidebar scroll does not move. So when I scroll with my mouse. It starts from beginning. And there are some glitches. 

Link to comment
Share on other sites

15 hours ago, ZachSaucier said:

On my phone now. Check the console. Also did you realize that I changed the HTML and CSS some?

Do you have a minute? 

Link to comment
Share on other sites

It's very hard for us to debug on a live site. I'm guessing something is wrong in your script but I can't say what.

 

If you're sure your script is correct, try stripping out other things until it starts working. Then figure out what is causing conflict.

 

By the way I see that you loaded GSAP 1 as well on that page. No need for that.

Link to comment
Share on other sites

6 minutes ago, ZachSaucier said:

It's very hard for us to debug on a live site. I'm guessing something is wrong in your script but I can't say what.

 

If you're sure your script is correct, try stripping out other things until it starts working. Then figure out what is causing conflict.

 

By the way I see that you loaded GSAP 1 as well on that page. No need for that.

I just want you to see this script. http://araf.dynamicflowdev.com/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.0.5

 

And I have removed GSAP 1. 
 

In this script there are some 'ScrollToPlugin' codes. Press the 'ctrl+f' then find the scrolltoplugin. You will understand. Do you think it is affecting something on my site?

Link to comment
Share on other sites

4 minutes ago, ZachSaucier said:

As far as I can tell that's just loading the assets. Regardless, it's minified so we can't figure out what the issue is.

as  much I know, there is a 'ScrollTo' function which is interrupting your created function. :-| And I don't know how to find it :-(

Link to comment
Share on other sites

13 minutes ago, ZachSaucier said:

As far as I can tell that's just loading the assets. Regardless, it's minified so we can't figure out what the issue is.

By the way, have you seen that? after manually scrolling down to the another section. Then, when I click on the side nav links; It goes up as we wanted. But it's not going down when we click on those same links :-( 

Link to comment
Share on other sites

2 minutes ago, Araf Hossain said:

By the way, have you seen that? after manually scrolling down to the another section. Then, when I click on the side nav links; It goes up as we wanted. But it's not going down when we click on those same links :-( 

The end position is obviously off. They're all going to the same position. 

 

We can't help you with this information. if you would like our help, please create a minimal demo on CodePen that recreates the issue.

  • Like 1
Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

The end position is obviously off. They're all going to the same position. 

 

We can't help you with this information. if you would like our help, please create a minimal demo on CodePen that recreates the issue.

I wish I can 😕 

Link to comment
Share on other sites

4 hours ago, ZachSaucier said:

The end position is obviously off. They're all going to the same position. 

 

We can't help you with this information. if you would like our help, please create a minimal demo on CodePen that recreates the issue.

Hey, I have a solution, would you please tell me? is there possible to add 'scrollBy' function in there?? 

Link to comment
Share on other sites

Hey sorry, it's not working :-( . no need to answer that. 

 

Link to comment
Share on other sites

5 hours ago, ZachSaucier said:

The end position is obviously off. They're all going to the same position. 

 

We can't help you with this information. if you would like our help, please create a minimal demo on CodePen that recreates the issue.

Hey I solved it with the "<span>" tag and "data-url" attr. 

 

Whatever thanks to you :-D 

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