manu126 Posted November 25, 2021 Share Posted November 25, 2021 Hi. I'm having trouble making this work. What I'm trying to achieve is to be able to keep scrolling and triggering animations based on it after initial horizontal scroll animation has ended. First two animations are working well, the problem is with the last two due to conflict with start/end positions and horizontal scroll ending. I'd appreciate if someone can point me in the right direction. Thanks in advance. See the Pen wvqVMby by manu126 (@manu126) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted November 26, 2021 Share Posted November 26, 2021 Welcome to the forums @manu126 I'm a little unsure about what you're trying to do here. There is nothing left to scroll so of course nothing will happen. To trigger that last boxes, you would need increase how far the horizontal scroll goes. 1 Link to comment Share on other sites More sharing options...
manu126 Posted November 28, 2021 Author Share Posted November 28, 2021 On 11/26/2021 at 10:37 AM, OSUblake said: Welcome to the forums @manu126 I'm a little unsure about what you're trying to do here. There is nothing left to scroll so of course nothing will happen. To trigger that last boxes, you would need increase how far the horizontal scroll goes. I want the horizontal scroll animation to stop where it does, and then be able to scroll a bit further without the horizontal scroll, so I can trigger more animations. It would be like "pinning" the horizontal animation and triggering the remaining based on scroll. I think I could achieve this by using two scroll triggers, but don't know how to set it up. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 29, 2021 Solution Share Posted November 29, 2021 Like Blake, I'm a bit confused - there's nothing below that section so what exactly would you want to be able to scroll to? Maybe you just need to add another <div> under your horizontally-scrolling piece so that your page has more content to scroll to. Adding ScrollTriggers won't make your page longer or create new content under that section, but if you just want to pin it for longer so that it adds even more padding, you could add a ScrollTrigger that picks up after that initial one is done, like this: See the Pen KKXPEop?editors=0010 by GreenSock (@GreenSock) on CodePen Perhaps I'm misunderstanding your goal. 🤷♂️ Also, don't put your scrollTween into the timeline. I'm not sure what you were trying to do with that but if it's a scrubbing scrollTrigger, you can't have a parent timeline ALSO attempting to control its playhead. That's a logical impossibility 1 Link to comment Share on other sites More sharing options...
manu126 Posted November 29, 2021 Author Share Posted November 29, 2021 14 hours ago, GreenSock said: Like Blake, I'm a bit confused - there's nothing below that section so what exactly would you want to be able to scroll to? Maybe you just need to add another <div> under your horizontally-scrolling piece so that your page has more content to scroll to. Adding ScrollTriggers won't make your page longer or create new content under that section, but if you just want to pin it for longer so that it adds even more padding, you could add a ScrollTrigger that picks up after that initial one is done, like this: Perhaps I'm misunderstanding your goal. 🤷♂️ Also, don't put your scrollTween into the timeline. I'm not sure what you were trying to do with that but if it's a scrubbing scrollTrigger, you can't have a parent timeline ALSO attempting to control its playhead. That's a logical impossibility I was able to make it work based on your answer. I had misunderstood how fully scroll trigger works, it makes sense why you were confused. Thank you all, have a nice day. 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