TFG Posted July 21, 2023 Share Posted July 21, 2023 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 Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted July 21, 2023 Solution Share Posted July 21, 2023 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 Link to comment Share on other sites More sharing options...
TFG Posted July 21, 2023 Author Share Posted July 21, 2023 Thank you so much for your help. That is exactly what I was looking for! 1 Link to comment Share on other sites More sharing options...
TFG Posted July 21, 2023 Author Share Posted July 21, 2023 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) Link to comment Share on other sites More sharing options...
Rodrigo Posted July 21, 2023 Share Posted July 21, 2023 Hi, Maybe something like this: See the Pen zYMLGXE by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
TFG Posted July 21, 2023 Author Share Posted July 21, 2023 Both options worked perfectly on our site! Thank you both very much for your help! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now