When I was searching for advice on creating this effect in Webflow, I came up short and had to figure it out through trial and error, so I thought it would be worth making a quick guide on it here in case it’s useful to anyone else.
See my homepage for the final effect.
First things first, you’ll need to add the content you wish to use. In my case it was just image files, but there’s no reason it can’t be something more complex like Testimonials, Product Cards etc.
I’d strongly recommend using a CMS collection to load in your content. This will mean you can modify your data from the CMS rather than using the Designer, which will save a lot of hassle further down the line.
Add a Div block and set its Width to 150 VW. By doing this we are telling it to take up 150% of the width of the screen.
Drop a Collection List into the Div and connect it to the Collection you previously created. Set the Layout to your desired amount of columns in the Settings tab, depending on how big you want them to display. I found 6 looked the best for my images. Then tick Limit items, which becomes important when adding the next row to ensure there’s no duplicated content.
Add some Horizontal Padding to the Collection Item to give them a bit of space, somewhere between 10-20px.
Drop a Link Block into your Collection Item, and then an Image into that, and connect to the relevant data from your Collection. This will give you linkable images, but of course if you’re trying to create something more complex instead, now is the time to build that out.
This step is surprisingly easy thanks to the intuitive Webflow animation tools.
Head to the Interactions panel and add a new Page Trigger, then on the following screen add a new Timed Animation.
Set up the keyframes as shown in the screenshots below.
In the Class field you’ll need to enter the Class(s) you gave your Collection List. The speed of movement is controlled by the Keyframe duration, so feel free to modify this, I found 30s was nice and smooth. Click done and then tick Loop in the Interactions menu, which will repeat these keyframes indefinitely.
If you click on the Site preview button at this point, you should be able to see the animation working moving. Almost there!
Phew, that’s the most complex bit done, now it’s just a case of doing the same again, but in the opposite direction!
Repeat the steps above, but with a couple of key differences.
We don’t want the second row to display the same Collection Items, so you’ll need to go into the Collection Item Settings tab and increase the number in the ‘Start at’ field.
Then, presuming you want this row to move in the opposite direction, you’ll need to make a new Interaction thats exactly the same, just going from Right to Left this time.
This effect and the layout it creates obviously doesn't translate well on Mobile screens. There's a few ways to handle this. I disabled the Animation and made the images go down to a single column on mobile sizes, which is a simple way to fix it.
Now it depends on the content you’re using, but I’ve actually set it up to display my latest Dribbble shots without me having to do anything.
This is done through Zapier, an automation tool that effectively connects API’s of hundreds of services together through a really simple interface. In this case I’m using it to connect Dribbble to Webflow, but you could also connect YouTube, or a range of other tools into Webflow too.
I learnt how to do this from this video by Charli Marie, so instead of me poorly explaining what she says in the video, just watch it!
Disclaimer: This solution is by no means perfect! Ideally, there would be an ‘infinite’ scrolling effect, so more and more images would keep getting loaded in from the right hand side, rather than my way which was to stop it and make it go back in the opposite direction. I’d also love for the animation to pause when an image is hovered over which I’m yet to figure out.
If you’ve got any ideas on how to improve it, or manage to create something of your own using this guide, please let me know using the email below!