dmo12 Posted July 20, 2023 Share Posted July 20, 2023 I'm working on a project where I have multiple sections, each with an initial load in animation based on a normal timeline triggered by a ScrollTrigger, and a second ScrollTrigger-based timeline that animates the elements out of the section as the user scrolls down. Based on the CodePen demo, the default behaviour seems to be that if the user scrolls within the ScrollTrigger's start and end range before the initial timeline is complete, once they scroll again, the element position, opacity, etc. will be instantly set to the playhead of the ScrollTrigger timeline. Is there a way to tween that, so the transition between the loadTl and scrollTl is smooth? See the Pen KKreQQV by dannymout (@dannymout) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted July 21, 2023 Solution Share Posted July 21, 2023 Hi, When debugging or trying to find an issue, always use markers in your ScrollTrigger instances. Maybe you're trying to do something like this: See the Pen ZEmRqgJ by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
dmo12 Posted July 24, 2023 Author Share Posted July 24, 2023 Perfect, this is exactly what I was trying to achieve. So you're tweening to the end of the loadTl when the scrollTl is triggered, and then using immediateRender to avoid those properties from getting set before it starts. Appreciate your quick response, and I'll use markers going forward. 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