Need help in creating horizontal scroll animation

Hi guys, this is my first ever website in Webflow, I want to create a horizontal scroll animation for my portfolio, I managed to create a horizontal scroll, but its just doesn’t behave as I want it to. I want the animation to start and end only when I the section is fully visible, but despite me choosing that option it doesn’t make a difference for some reason. Really appreciate it if someone break it down for me. Animation stops at 30% and nothing I can do about it.


Here is my public share link:
https://preview.webflow.com/preview/philipps-ultra-awesome-site-c3815e?utm_medium=preview_link&utm_source=designer&utm_content=philipps-ultra-awesome-site-c3815e&preview=5e9d5c492da7b047d10cb94a76f8645d&workflow=preview

You can see how to create a horizontal scrolling section here:

That is what I watched to make the animation , I can’t spot what I did wrong because the animation works as I scroll down, but it just stops at 30%.

IMG_4481 MConverter.eu

Looks like you’ve gotten closer and just need to fine tune it to your desired look. The biggest difference between your arrange vs. the video is that the video is sizing each moving group to fill the viewport. 100% width and 100vh. The interaction wrapper element is set to the appropriate height to make everything work out mathematically. Each section is 100vh, therefore if you have three sections the interaction element height will = 300vh.
Your setup does not follow this method, seeing that your sections are short in height, so you’ll need to play around with the settings more to figure out that math.

Yes, I could figure that by placing more sections beneath. This made animation to play further. That was when I understood that I need to finetune the math now.