Jump to content
Search Community

ScrollTrigger on Mobile

liamny test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

  • Solution

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

  • Like 5
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.
×
×
  • Create New...