eglaw Posted September 19, 2022 Share Posted September 19, 2022 Hello, got a problem with creating an animation of mine: i have a vertical slides scrollDown-like tween, that has slides of height: 100vh (fullscreen) that i have to snap to screen as slide, and i have to lock scrolling down the slides, when the current slide (that has snapped on center screen) contains an inner div (overflow-y: hidden) that has lots of text, and it has to scroll down (mousewheel commanded) to the end of text before releasing the slides scroll. Of course everything is scrubbed if the scroll is reversed to the top. I have the HEADER + INTRO content which are not slides related content, and the FOOTER that ends the page, that also is not scroll related. Can it be achieved somehow? See the Pen XWqgNLE by egorlaw (@egorlaw) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted September 19, 2022 Share Posted September 19, 2022 Hi @eglaw and welcome to the GreenSock forums! First, is this question related to banner adds or a website/webapp? You posted this thread in the banner sub-forum, so let us know in order to either keep it here or move it to the GSAP sub-forum. Second, the codepen you provide is great, but with that and the description you provide is really hard to help you. Please create a codepen of your own with a minimal example of the issue you're having so we can have a better idea of what the issue could be. Happy Tweening!!! Link to comment Share on other sites More sharing options...
eglaw Posted September 19, 2022 Author Share Posted September 19, 2022 Oops ... first time here, signed up and bought membership, just few days ago. Yes im developing a website ... this post is in a wrong place sorry . Link to comment Share on other sites More sharing options...
Rodrigo Posted September 19, 2022 Share Posted September 19, 2022 No worries, the thread has been moved to the GSAP sub-forum 👍 Can you provide a minimal demo that illustrates the issue you're having? Please take a look at this: Finally thanks for being a club member and supporting GreenSock! 🎉 Link to comment Share on other sites More sharing options...
eglaw Posted September 20, 2022 Author Share Posted September 20, 2022 workin' on it .. here it is Link to comment Share on other sites More sharing options...
eglaw Posted September 22, 2022 Author Share Posted September 22, 2022 ^ Bump ... any ideas on how can i achieve my goals ? Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted September 22, 2022 Solution Share Posted September 22, 2022 Hey @eglaw, Sorry this slipped through the cracks. One alternative could be pin the sections and create a scroll animation for the text content and scrub it using Scroll Trigger, like that you ensure that the users see the entire text before moving onto the next section. It seems the most user friendly and simplest approach, better to look at it in the codepen page, the embedded is to small for the styles I used 😊: See the Pen dyezLKp by GreenSock (@GreenSock) on CodePen Other than that, you'll need to block the scroll, do some sort of instructions to tell the user "scroll all this text to continue" and then re-instate the main scroll in order to keep going. Hopefully this helps. Happy Tweening!!! 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