Streaming live at 10am (PST)

Infinity elements animation via interactions?


#1

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


#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.


#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 @J_Canan for fast help :v:️:blush:


#11

My pleasure! :call_me_hand:t3:


#12

No problem :slight_smile: