Streaming live at 10am (PST)

Simple scrolling animation

Hi! I’m looking for help to set up a scrolling kind of smooth paralax thing like in this website: https://www.c3.nyc/

Help much appreciated!

/Daniel


Here is my public share link: https://preview.webflow.com/preview/lifechurch?utm_medium=preview_link&utm_source=dashboard&utm_content=lifechurch&preview=f9d01cd5f9caa990340d2cc414ad9200&mode=preview

You can make 1 unique IX Animation that you’ll reuse for all sections.

All sections should share the same first class (selector name), like .parallax-section (combo class doesn’t matter, they can all be different after the first one)

Each section is position:relative, height:100vh, and contain a width:100% height:100% position:absolute div with z-index:1. You can then add another div under the section, with z-index:2 and put all the non image content inside of it.

So, you define a “while scroling into view” triggered IX on the first section, and you select target class so it will work the same on all sections. Create an animation, the select the image div in the designer. Now click on + and add an action on that div, chose Move. Affect this action to Class, not Element, and select Affect children only.

Set Move up 50vh for the first keyfn move down 50vh for the last. Test like this and adjust all the easings and threshold if nececssary.

Here’s a demo I just made following the method above:

https://sbx.webflow.io/simple-parallax

Open it in Webflow: https://preview.webflow.com/preview/sbx?utm_medium=preview_link&utm_source=designer&utm_content=sbx&preview=3ec033cabc671d9aed325632b7d7daa3&pageId=5d7f7db5bda9c6e229d0340e&mode=preview

1 Like

I finally got it to work! Thank you for a clear and good explanation, but I could honestly not have figured it out without your build example.

1 Like

It was a bit of a dry explanation so I figured the build was a necessary thing yes.