Community forum for knowledge and support

Updated 10 months ago

Abrupt effect after adjusting logo carousel

At a glance

Hey there! I'm adding a new logo carousel feature to a site. However, after removing a column from one of the logo lists and adjusting the X distance in the iteration to adapt to the new width, I'm experiencing an abrupt effect after a while. Here is the read-only link to the project. Does anyone know why this could be happening?

L
E
6 comments

looks smooth to me in preview

Thanks for the quick reply ! Perhaps it is only on my end but I see this when the first loop is about to end.

hey ed, From your screen recording I can see you’re previewing on a much larger screen then mine. So the problem is that two copies of the logo list are not enough to cover the distance before you have the animation returning back to the intitial state. The solution that worked for me was to duplicate your logo list a third time so you have 3 identical logo lists rather than two. That covers the larger screen space.

Thanks Lucas, that worked like a charm 🙌 Never thought it was so simple to solve.

Alternatively I would set a max width of the whole component and add a div overlay to either edge so the logos fade in and out like this

This is a very good alternative. I've used this on other sites previously, and it integrates more tidily with the rest of the page content. This solution also solves the issue of the logo appearing abruptly on the right, which looks much better.

Add a reply
Sign up and join the conversation on Slack