Infinity elements animation via interactions?

Design help General
1

Hi, who know, how to do animation like this?

infinity-animation
infinity-animation1039Ă—182 46.2 KB

2

I’m not necessarily good with explanations, but you can copy this into your project and view how I made it.

https://preview.webflow.com/preview/no-scroll-62a4e8?preview=72b72ab7eb8b8e63f35303efeefa0f27

3

Sorry, did not correctly ask the question. I mean like this:

I know how do on this link: http://scottssquare2.webflow.io/ but it’s not good code solution.

4

So instead of the colored squares you want an images to do the following on hove?

5

Yes, logotypes infinity horizontal animation

6

I’ll work on it some more and see what I come up with.

1 Like
7

Try this here: Logo Carousel

Shouldn’t be too complicated to follow!
Hope this helps!

8

I would actually go this route: Slick Slider

And you can change the autoplay speed to 0.
Set the cssEase to “linear”
And then just change the transition speed/timing and viola!

I posted a javascript example below. (They are real settings and you could use them exactly if you want)

$(function(){
    $('.slider').slick({

        speed: 5000,
        autoplay: true,
        autoplaySpeed: 0,
        cssEase: 'linear',
        slidesToShow: 1,
        slidesToScroll: 1,
        variableWidth: true

    });
});

You can play with it here: jsfiddle

9

You can also write:

infinity: true,

10

Oh this is really what I wanted to do. Thank you @MrInk and @Noah-R for fast help :v::blush:

11

My pleasure! :call_me_hand:t3:

12

No problem :slight_smile: