I’m very new to Webflow and struggling to figure out a page scroll animation. Id like to create a background that slides in just like this page (https://www.luminary.com - third blue block “Maximizing member value”.) I’ve tried creating a page scroll animation with a Section, Image and a div block but nothing is really working. Is this possible in Webflow?
Tom Fellner
Hey @tomrfellner, this is definitely possible in Webflow. I have created a project showcasing the animation you’re trying to replicate. This works across all breakpoints.
The most important settings are the following:
.animate_image-wrapper {width: 120vw;}
.animate_image {width: 120vw;}
The animation moves .animate_image by the excess amount of 20vw.
If there are any questions, feel free to reach out.
Hi Julian, the problem is the image is outside the frame or browser window (see attached screenshot). I had the same issue. If you look the luminary site, that’s not happening.
@tomrfellner, I appreciate your reply.
My mistake, I didn’t notice the horizontal scroll when I created the project for you.
This is an easy fix though. I have added another div called animation_container with width: 100vw; and overflow: hidden;. The larger wrapper and the image itself (both have a width of 120vw;) are inside this new container.
Please have another look at the updated project and let me know if this works for you.
Thanks, Julian, for your help, This is exactly what I am looking for! I will give this a try.
Tom
HI Julian, I replicated what you have, and I think I have everything working. see here. The only issue is I have no idea what I did. Guess I need to go through the online tutorials.
Tom
@tomrfellner, that’s great. I am noticing a little bit of a horizontal scroll though. If you can share your read-only link, I can help you out.
The Webflow University is a fantastic way to get started. Anything else will come with time and experimentation. At least, that’s how I have learnt everything I know today.
