Streaming live at 10am (PST)

Struggling with Parallax Affect on Scroll

I’m trying to implement a parallax effect on my portfolio site. I want the intro to scroll slower than the rest of the page. I’ve followed the parallax movement on scroll instructions, and it jumps my content all over the place. Without the effect, my intro content is comfortably in the frame between the header and the portfolio content. When I implement the parallax on scroll, my content starts in a random spot.

https://preview.webflow.com/preview/d-scotts-portfolio?utm_medium=preview_link&utm_source=dashboard&utm_content=d-scotts-portfolio&preview=54d723512efc2e4ec8a17b40cbb7ae4b&mode=preview

I’m not 100% sure if I understand what you want to do, but you could try something like this:

  • Change the starting point of the animation to “when element is fully visible”.

  • Change the scroll actions to the whole “div block” (because I think you want all the content to scroll slower than the rest?)

  • Start the first keyframe at around 30%, because it’s the first element visible on your page, which makes this the start value.

  • Set the first keyframe to 0% move on the Y-axis.

  • Set the second keyframe to 100% move on the Y-axis.

This will make a kind of parallax effect :slight_smile:

T1hank you! The 30ish percent thing worked! Incredibly helpful!