Streaming live at 10am (PST)

Infinity elements animation via interactions?

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

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

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.

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

Yes, logotypes infinity horizontal animation

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

1 Like

Try this here: Logo Carousel

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

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

You can also write:

infinity: true,

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

My pleasure! :call_me_hand:t3:

No problem :slight_smile: