Jump to content
Search Community

lock scrolltrigger in timeline and enable via onclick multiple times

hannah_hey test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hello again,
im working on a small gsap scroll animation but im stuck and i've tried nearly everything but nothing works for me but i can't imagine that this is not possible because it seams so simple.


What I'm trying to do is (I've simplyfied the code in my minimal demo i've also written what and when i want to do what in the code)...

... I want a picture coming in from the left then disable the scrolling so i cant do any scrolling anymore unless i click the picture. So the clicking enables the scrolling then i can continue to scroll and the second picture comes in from the side.

I've tried so many things and nothing works so it would be very nice if anybody could help me out on this.
 

See the Pen KKGEWGb by hannaaaahp (@hannaaaahp) on CodePen

Link to comment
Share on other sites

  • Solution

Hi,

 

This might not be the easiest of things. One option is to add/remove an event listener to the document.body element, that prevents the default for the scroll event and the touch ones:

https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event

 

But having a scroll bar and the content not moving should be misleading and probably bad UX.

 

Another option is to set the document.body overflow to hidden until the conditions you set (be explicit about those to the users, otherwise this is also terrible UX) are met.

 

Here is a fork of your codepen that somehow works:

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

 

Hopefully this helps.

Happy Tweening!

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...