How to enable the div once target end

[Narendra Verma]

Hello,

I have a menu on my website and I have to hide my menu only for first two section and then enable my menu. I tried below code but it's not working for me.

 

Would you help me out with this issue?

See the Pen vYGpwMK by Narendra_verma (@Narendra_verma) on CodePen

[Visual-Q]

I'll break my rule on answering scrollMagic questions just this once:

 

See the Pen LYNeKLR by Visual-Q (@Visual-Q) on CodePen

[Narendra Verma]

@Visual-Q, Yes, I checked codepen and it's working. I want to know what changes you have done.

 

Can you explain me?

 

 

[ZachSaucier]

30 minutes ago, Visual-Q said:

I'll break my rule on answering scrollMagic questions just this once:

You heathen!

 

But seriously why not use ScrollTrigger (the official GSAP scroll plugin) instead? It's better in every way  

See the Pen YzqYome?editors=0010 by GreenSock (@GreenSock) on CodePen

 

To learn more about it see the ScrollTrigger docs.

[Visual-Q]

9 minutes ago, hybreeder said:

I want to know what changes you have done.

Whether you use scrollMagic(blasphemy) or scrollTrigger as Zach showed:

 

The header was set intitially to invisible with autoAlpha:0, you can just set this directly in the css by the way, and then only the specific trigger element .show-menu is targeted to show the header with  autoAlpha:1

 

The loops you created over all the sections and mutliple timelines were unnecessary and not working correctly.

[Narendra Verma]

@ZachSaucier, Yes ScrollTrigger is also good,

 

I always try to use this but whenever I get any issues then i research on this but I always get the solution on scrollmagic.

 

Check this example, I was searching this in scrollTrigger but i got in scrollmagic.

See the Pen ZdaxXQ by Visual-Q (@Visual-Q) on CodePen

 

 

 

[ZachSaucier]

3 minutes ago, hybreeder said:

whenever I get any issues then i research on this but I always get the solution on scrollmagic.

Why not ask a question in these forums about it instead? What makes ScrollMagic easier for you? I'm curious because we're always looking for ways to improve.

[Visual-Q]

ScrollTrigger is pretty new so you'll still run into a lot of old pens on scrollMagic kicking around.

[ZachSaucier]

7 minutes ago, hybreeder said:

Check this example, I was searching this in scrollTrigger but i got in scrollmagic.

I recommend always checking the demos list in the ScrollTrigger docs when looking for demos. Most effects you would want to make are listed there.

[Narendra Verma]

@ZachSaucier, Yes, You are right, I have to learn the scrollTrigger.

 

Can you help me one example when section reach on screen then start the animation. I mean before I was using belowscript width ScrollMagic

 

$(selectorname).each(function () { // animation code here}

 

can we use ScrollTrigger with above function ?

 

 

 

[Visual-Q]

Yes you can loop over sections that way:

 

See the Pen OJNzKQK by Visual-Q (@Visual-Q) on CodePen

 

Though you don't have to use jQuery if you're comfortably with normal js forEach or even just regular js loops.

[ZachSaucier]

Perhaps my article on animating efficiently can help you understand what's going on with loops.

[Narendra Verma]

Thank you so much for valuable information.