Streaming live at 10am (PST)

How to build a Scroll Animation like this?

I want to build something like the “How to host with Webflow” Section on https://webflow.com/hosting

Tried hard, but no chance. Is there a Template or Tutorial available?

cheers
chris

Hi @wilbourge

let us see what you have done so far.
Please share a read-only link of your project:

Thanks,
Matthias

https://preview.webflow.com/preview/ava-help?utm_medium=preview_link&utm_source=dashboard&utm_content=ava-help&preview=69fb300096219a8b22eb0eb35e585488&mode=preview

and here it is …

I had a look on your project. Try to give your "div"s names. It’s tough for others to find items.

  • add a section with “100%” width and “400vh” height to your project
  • put in this “section” a “container” and call it “sticky-container”
  • style it:
    image
    – put in the “container” your first tile
    – copy the “container” and paste into your section twice

If this work, you can think about “scaling” an “opacity”

the animation part was what i was looking for …

I’ll help to get the final thing. But first you have to prepare it.

  • set your section back to display block
  • set your div “sticky” height to “auto”
  • remove “sheet 2” and “sheet 3” in both “sticky” div
  • remove in second div “sticky” your “sidebar”
1 Like

https://preview.webflow.com/preview/ava-help-470cd0?utm_medium=preview_link&utm_source=dashboard&utm_content=ava-help-470cd0&preview=8a545f49072da6cdf73a801b1c814999&mode=preview

i started a new one

Yeah. Looks good.

  • select your “section” (with all the stuff in it) an change height to 1000vh
  • select “sticky-container” set position top to “0”
  • give every “slide” a unique name like you started “slide-1”, “slide-2”…
  • remove your “interactions” on “slide-2”

all right.

but how can i do the animation part?

where do i set the animation, and how to build the color and scale effect as in the example above.

  • select every “slide”

  • go to transform and set
    image

  • select every “slide” and set to “relative”

  • add the first slide a position top to “0”

  • the second slide to 10, the third to 20 and go on

  • select your section and add a “while scrolling in view” interaction

  • create a new scroll animation
  • build something like this
  • if the second slide comes into the viewport, you should start scaling (75%) the first one
  • if the third slide comes into the viewport, you should start scaling (80%) the second one
1 Like

you saved my day! thanks a lot matthias!

1 Like

i got another “unsolvable” … when i click the navigation it goes straight to a slide … perfect … but if i want to go back from slide 5 to slide 1 … it gets stuck

  • remove your svg. in background, it slows everything down use png or whatever
  • remove margin 500 from every slide

https://preview.webflow.com/preview/ava-pro?utm_medium=preview_link&utm_source=dashboard&utm_content=ava-pro&preview=8a545f49072da6cdf73a801b1c814999&mode=preview

still have the problem with the navigation

and when i remove the 500 margin, every slide sticks together, how can i have more space between?

You can solve your navigation only with custom code.

<script>
$(document).ready(function() { 
$(".your1button").mousedown(function() {
		var positionSlide = $(".your1Slide").offset().top;
    $('html, body').animate({scrollTop:positionSlide},"slow");
});
});
</script>

i tried to set it, but guess i did it wrong?