Trouble with horizontal scrolling animation on Webflow site

Hello,

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?

Thanks so much for your help!

Https://www.nicholasgioeli.com/mobilize-case-study

Hey @ngioeli !

First welcome to the Webflow Forum :slight_smile:

Would you be able to share a read only link of the site so I could more effectively troubleshoot your problem? Share a read-only link | Webflow University

Thanks,

Sean

1 Like

Hi @DasSean! Thank you for the warm welcome! Here’s the read-only link Webflow - Nicholas Gioeli

Thank you so much!

1 Like

Alright I found a solution :slight_smile:

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
  • Action (Play Scroll Animation)
  • Animation Boundaries (0%) (Start animation (0%) when element… (is fully visible)
  • Scroll animations (I selected (Mobilize Horizontal Scroll) to reuse it and adjust the values inside
  • First move to (0%)
  • Second move to (50%)

With (Hero-Section-Design-Wrapper) still selected and the interaction still open

  • (+ at 0%) (Background Color) set to (White)
  • (+ at 5% (up to you where exactly you want this) (Background Color set to (#222)

I hope these instructions were easy enough to follow :slight_smile:

If you need anymore help or further instruction I am happy to help just let me know

2 Likes

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?

Here’s the link to the read-only file as I believe I made a new one: Webflow - Nicholas Gioeli

Thanks!

1 Like

It looks like you did everything correctly. A few things you could do to make it less jumpy are:

  • Increase the smoothing (Below where you select the Scroll Animations)
  • Add an easing to the both of the (Design-Stage) moves inside the interaction.

Other than that at least on my end it looks very smooth. If you have had the designer open for a while it might be worth reloading the page.

2 Likes

That worked great! Super smooth and not buggy. I appreciate you walking me through that!

Thanks again for all the help :slight_smile:

2 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.