Beginner - show/hide visibility when another class is visible

[TFG]

Hi all...this is my first time posting here! I am a beginner with gsap but with this forum and tutorials, I have managed to put together this example codepen. I am struggling with disabling the visibility of the button when the panels are out of view. The button should only be visible during the horizontal scroll across all panels and then ideally, the button would pin itself at the last panel. Any help would be appreciated...

See the Pen GRwGVdO by tracy621 (@tracy621) on CodePen

[mvaneijgen]

Hi @The Franchise Group welcome to the forum and for being a Greensock club member 🎉

 

I've made the button part of the .container with all the .panels and and made it absolute instead of fixed. It is better to have ScrollTrigger handle all the pinning when you use it. I've removed your tweens onEnter and onEnterBack, but feel free to add them back again, keep in mind that you can't tween some properties eg display are not tween-able, but other properties like opacity are. 

 

I've add some extra properties to your ScrollTrigger object:

 

endTrigger: ".container", // Make the end trigger the container the trigger could be the same 
end: "bottom bottom", // when the bottom of the elment hits the bottom of the browser end
pin: toggleButton, // Just pin the button 

 

Hope it helps and happy tweening! 

 

See the Pen qBQyWgY?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[TFG]

Thank you so much for your help. That is exactly what I was looking for! 

[TFG]

I apologize - I have one more question. In another scenario, if the button is outside the container div and I only want the button to be visible during the visibility of all panels, is that still possible? 

 

See the Pen abQKede by tracy621 (@tracy621) on CodePen

 (not sure if i attached this correctly)

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!

[TFG]

Both options worked perfectly on our site! Thank you both very much for your help!