castlearg

Thanks so much for the quick reply. That put me on the right track and worked for the codepen(now updated). For some reason in my real project the bg tween was not resetting - I fixed it by explicitly setting as below after playing around with repeatRefresh and yoyo params. There must still be some external forces working on my real project but it got me rolling for now! const reddening = () => gsap .timeline() .set(ball1, { backgroundPosition: "0% 0%" }) .to(ball1, { backgroundPosition: "100% 0", ease: `steps(${numStepsInCycle})` }) .yoyo(true);

I'm attempting to use registerEffect to encapsulate several animations in one handy function. Specifically I am translating one element, tweening bg image of the same element, and translating several other background elements. I'm having some trouble where the bg image part of this sometimes does not work. Check in the codepen for one example. If you call the effect twice the bg image will only animate on one of them. There's a few more nested timelines than needed but this mirrors the structure of my large project just in case there's a bug in there somewhere. Any advice greatly appreciated!