Simple scrolling animation

Design help Animations & Interactions
1

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

2

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.

3

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
4

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
5

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

6

I somehow have managed to mess this whole thing up while editing it now long after. Could you please please link me to a project I can check out. Seems the old one you made is gone.
Would appreciate it so so much Vincent!

7

https://sbx.webflow.io/simple-parallax still works and from the navbar you can clone the project.

8

You are awesome man!

1 Like
9

Hi @vincent, I’m trying to get the same simple scrolling animation to work on a horizontal scrolling page. Will it work the same way?

11

I don’t see why it wouldn’t, gov it a try and come back to report :slight_smile:

12

I tried using the same elements with adjustments for the horizontal scroll (move horizontal interaction) but it somehow doesn’t work unfortunately :frowning_face: