I’m having trouble with my horizontal scroll animation on my case study page. When scrolling down the page for the first time, the animation triggers before it is supposed to. The weird thing is, if you scroll to the bottom of the page then back to the horizontal scroll section it works perfectly fine. I redid the animation several times and am still encountering the same issue. Has anyone seen something like this before? If so, how can I fix this so it is consistent every time?
So you are currently using (While Page is Scrolling) Page Trigger. I think an easier solution would be to use a (While Scrolling in View) Element trigger on (Hero-Section-Design-Wrapper). I would also combine the background color animation into this since they are tied together and keeps everything together. That way if you ever add or remove sections in the future it wont effect this awesome horizontal scroll.
The steps you would take to do all of this are:
Remove the two page triggers that refer to the horizontal scroll ( So there are no conflicting animations)
Select (Hero-Section-Design-Wrapper)
Go to interactions and add (While Scrolling in View) Element Trigger
Thank you so much for your detailed steps! I went ahead and updated it as you laid out but I’m still seeming to have problems with it. This time around it appears pretty glitchy and the images seem to jump from one to the other. Maybe I did something wrong? Do you mind taking another look please?
