liamny Posted April 2, 2021 Share Posted April 2, 2021 Please note, this snippet of code is to be used on mobile devices. 1) The button is fixed on the bottom, and disappears when the user reaches the bottom which is fine. When we scroll up the button should appear again. Problem: when I scroll up, I don't see the button sometimes. What am I doing wrong? 2) When we scroll down a tip should appear for a brief moment. When I scroll up, the tip appears but I'd like the tip to appear only when we scroll down. How is this done? I appreciate the help. See the Pen NWdjxMr by mlima2020 (@mlima2020) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted April 3, 2021 Solution Share Posted April 3, 2021 Hi there @liamny Welcome to the GSAP forums! 🙂 FYI - I made a little tweak to the CSS in your pen so I could scroll on my device. Setting the container to 200vh instead of a pixel value. You weren't far off a solution! I couldn't recreate the issue you were having with the button but the syntax you currently have can be simplified a little, maybe this will help? gsap.timeline({ scrollTrigger: { trigger: ".button", end: 'bottom', toggleClass: "blockDiv", } }); For the tip - the magic is all in toggleactions - This determines how the animation is controlled as it toggles in and out of view. You're looking for toggleActions: "play reset none reset" This will play when it enters the viewport - reset when it leaves, take no action when scrolled back into view, and reset when it leaves again (scrolled all the way back). Here's an adjusted codepen. Hope this helps! See the Pen 25cc28b1d8952dd12f460a7fd63cf807?editors=0010 by cassie-codes (@cassie-codes) on CodePen 5 Link to comment Share on other sites More sharing options...
liamny Posted April 3, 2021 Author Share Posted April 3, 2021 @Cassie - thank you so much. It looks great! 1 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