Ak89 Posted October 28, 2021 Share Posted October 28, 2021 Hello. I am trying to add a parallax image sequence to a pinned animation with ScrollTrigger. The Parallax section work fine as standalone code (this is a code I grabbed from another post on this forum). However, when I add it to the end of my animation, the parallax effect doesn't work. I suspect the positioning of the background images is the reason, but can't figure out what the solution is. Could you please take a look and advise? Thanks, Akbar See the Pen WNEOEeO by Akbarbakhshi (@Akbarbakhshi) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted October 28, 2021 Solution Share Posted October 28, 2021 Hi Ak89, You're not creating your ScrollTriggers in order. I would suggest popping all your ScrollTrigger code inside your enableScrollTimeline function. 4 Link to comment Share on other sites More sharing options...
Ak89 Posted October 28, 2021 Author Share Posted October 28, 2021 8 hours ago, OSUblake said: Hi Ak89, You're not creating your ScrollTriggers in order. I would suggest popping all your ScrollTrigger code inside your enableScrollTimeline function. Oh I see. Thank you! Problem solved. Link to comment Share on other sites More sharing options...
Ak89 Posted October 28, 2021 Author Share Posted October 28, 2021 16 hours ago, OSUblake said: Hi Ak89, You're not creating your ScrollTriggers in order. I would suggest popping all your ScrollTrigger code inside your enableScrollTimeline function. Hi again. One more thing. I have all the scrollTrigger stuff inside the enableScrollTimeline function which is supposed to trigger after the first animation is completed, but if you start scrolling quickly when the page loads, the scrolling works while the animation is playing and it messes the whole thing up. How do I disable the scroll at the beginning until the initial animation is over? Link to comment Share on other sites More sharing options...
OSUblake Posted October 28, 2021 Share Posted October 28, 2021 If you are talking about disabling scrolling, most people set overflow: hidden on the body, and then you can remove that when your animation is done. Link to comment Share on other sites More sharing options...
Ak89 Posted October 28, 2021 Author Share Posted October 28, 2021 Right... but the whole point of onComplete: enableScrollTimeline in my timeline is to postpone other triggers until the current timeline is complete. I was able to fix the problem. I set the display of the sections to none and then set it to block inside the enableScrollTimeline function. Thanks for the tip anyways. I'll keep that in mind. 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