Streaming live at 10am (PST)

Automatically scroll animation

Problem successfully solved.

Hi there @rkrns

If you’re trying to recreate the website that you’ve mentioned in your original post, that’s very easy to do on Webflow! What’s really happening is that the word “culture” in the background has a “fixed” position so it stays right where it is as the page scrolls. The rest is simply a grid of images that scrolls like any other normal website. Let me know if this is exactly what you’re trying to achieve and I’ll try to help you out with more details. Also provide a preview link if possible!

Cheers,
Aditya

Sorry for the deleted message above. I was trying to do this with Webflow interactions but I found out an even simpler method. I see you’ve attempted some custom code there and I’m assuming that didn’t work, so I’m just going to suggest you to replace that code with this bit of code right here before the </body>:

<script>
var scroll = setInterval(function(){ window.scrollBy(0,1); }, 100);
</script>

Once this is on your site, publish it and the published site should start scrolling automatically once the page loads. You can play with those numbers to affect the speed of the scrolling. The 100 in the code above is the duration while the 1 is vertical distance. Hence, the page scrolls down by 1px every 100ms. Try that out and let me know!

As for the back to top button, give the main parent container of the images an ID of top or whatever you’d like. Now add a button at the very bottom of your page. Go to button settings, select “Page Section” and choose top from the dropdown. It should scroll right back up to the top on click. Let me know if all of this works and in case you run into any difficulties. I tried it on a different site and it worked absolutely fine.

Cheers.

You can try changing the duration from 100 to 40. That made it a lot smoother. However, I’m no expert at JavaScript so I’m not sure if there’s a coding way of improving the easing. Good luck!