Streaming live at 10am (PST)

Animation is jerky and glitchy

Hi folks -
i have built a couple of animations on this homepage. It’s pretty basic. The first instance is just a scrolling text marquee that on page load, translates X -100% over a set time, then resets to 0% and loops. That one works ok.

The second one does basically the same thing, but it’s animating a card with an image and text on it. Same animation, just copied it from the first to the second. But it is very jerky and glitchy. I tried changing the translate from -100% to -100vw, doesn’t make any difference.

any idea what’s going wrong ?

Here is my public share link:


I suggest you use slider for this, and put it auto rotate.


This looks to be caused by using two separate interactions applied the same parent element.

Since you’ve targeted the .marquee class and are animating based on a percentage of it’s width, both animations work with a single interaction. I’d imagine that your text container and image containers are different widths, so by doubling up on the interactions your causing one version (in this case, the image marquee) to “reset” it’s position too early.

1 Like

ahh, that makes sense. that was it - just duplicated that class and applied the animation to the new class, and voila. Thanks a bunch!