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