Wondering if this is possible with Webflow? (Animated CMS Team Tiles)

Design help Animations & Interactions
1

Hey Webflow,

Came across this continuous image slider animation, and I was wondering if it would be possible in Webflow for a team page where each image is the headshot of a team member and each team member is a CMS item.

Marvel | Online Free Digital Design Platform & Mockup App (bottom of the page)

My guess is that it’s not possible using a single CMS collection as animations applied on a CMS item in a collection apply to all CMS items at the same time.

Hopefully I am wrong :slight_smile:

1 Like
2

Hi @samliew, I know you get tagged on here all the time, but if you have time, would you mind checking this out?

  • I went and created a sandbox site for this and its share link.

  • I tried some configurations from your answer on this post, but I was not successful. I have also tried TONS of different animation combos, but I knew they wouldn’t work with Webflow’s interactions as the interaction is applied to all collection items.

  • I have also tried other layouts like this one with some animation, but it gets sloppy and is not easy for the website owner to add unique CMS items.

If you do end up having time to look at this post, please let me know if you have any ideas or could offer help on how to display collection items in rows with the cross-row animation.

Thank you!

1 Like
3

This could be accomplished with custom code. Would be easy to do with slick.

4

@webdev could you explain more? I actually tried to use this Carousel, but I still saw a glitch on repeat.

Below is as far as I have gotten with some custom coding, but there is still a glitch on repeat, and the timing will obviously be thrown off with every new CMS item.

https://moving-tiles.webflow.io/

Here is my read-only link again, too.

Man, any help you can offer on that Slick Slider would be muchhhhh appreciated. I am burnt out on this problem haha.

Thank you!

5

RO link broken please update.

6

@webdev Wow, sorry about that.

Here is a new share link and a cloneable link.

Thanks again and sorry for the bad link!

7

I think you would need to use alternate, so it changes direction instead of starting over. animation: sliderLeft 60s linear infinite alternate;
But seriously, who is going to be sitting there looking at this animation over 60 seconds? Maybe the flash will jar them back to reality :).

That might require some fancy JS.

And my last word on this is → you should load an optimized image just for this, in the collection, at a ratio needed. You don’t need to be loading 1080px wide images.

1 Like
8

@webdev Thanks for looking into this!

  • I agree the final site should have optimized images; I just used Webflow’s pre-loaded CMS items for this sandbox…the large file sizes definitely don’t help with the smoothness/loading

  • Unfortunately, the client wants an infinite scroll instead of the images moving back and forth :frowning:

  • I was afraid of the fancy JS on the timing with number of CMS items

All in all, I really appreciate you taking the time to look through this. I think for now I am going to suggest a different design with less moving parts :slight_smile: We will see how that goes haha.