Jump to content
Search Community

ScrollTrigger toogle animation onEnter and onLeave

toby311 test
Moderator Tag

Recommended Posts

So I want to use ScrollTrigger to toogle pointerEvents of the elements whenever user scroll to a certain div block.
In the codepen, when user scroll to red block, pointerEvents supposed to be auto, and at green block, it supposed to be none. What I tried is only work for onEnter and re-onEnter the block only. Im new to ScrollTrigger so could someone tell me how can I achieve this and is using ScrollTrigger the right approach? 

See the Pen poPdZrb by ntobyh (@ntobyh) on CodePen

Link to comment
Share on other sites

Hey there Toby,

How about something like this?

Additional note - I assume you're trying to disable the button by changing pointer events - this is a pretty inaccessible pattern so I'd go for swopping out aria disabled instead and then styling that state in CSS.

See the Pen 1f67c7c5ca16c6ac7aed2215845ac326?editors=0110 by cassie-codes (@cassie-codes) on CodePen

  • Like 3
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...