Automatically scroll animation

Design help Custom code
1

Problem successfully solved.

2

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

5

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.

2 Likes
7

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!

8

Hi! This is a long shot as this forum was from 3 years ago, but I was wondering if you had a solution for disabling this auto scroll for mobile. It feels a bit janky on mobile, but looks great on desktop so I’d like to just disable it. Here is my link

9

Hey there @mflood!

It seems you may want to disable the above javascript for mobile devices. Please follow the response in this post: javascript - How to disable some js scripts on mobile devices - Stack Overflow

if (window.screen.width > 780) {
  document.write( 
    '<script src="http://kleaz.com/fsc/three.min.js"><\/script>' +
    '<script src="http://kleaz.com/fsc/Projector.js"><\/script>' +
    '<script src="http://kleaz.com/fsc/CanvasRenderer.js"><\/script>' +
    '<script src="http://kleaz.com/fsc/me.js"><\/script>'
  )
}

This example code above would ensure the script works only on devices that are 780px or wider. You can use this method. Let me know if you have any questions!