supp

Hi Cassie, I'm not sure if I want to stagger the items or load them at once, so for now this is fine - thanks! I'll keep in mind to avoid pseudo-elements as much as I can.

Hi Cassie, thanks for the quick reply. It almost works flawlessly, thanks! I'd never have achieved that myself. One more thing; the CSSRulePlugin is used like this (not entirely visible in my first example): var cssAnimateAfter = CSSRulePlugin.getRule(".prep-animate:after"); //inside the animBgReveal, other code cut for this example .to(this.cssAnimateAfter, { backgroundPosition: "100% 100%", duration: 2.3, ease: "Power2.easeInOut" }) It's triggered inside the animBgReveal, and works for the first item. However, it changes all the elements that share the .prep-animate:after elements. So the backgroundPosition change is then already triggered for all elements. Q: Any way to apply this animation to only the element that the animation is running for?

Hi there, I'm getting into GSAP but it sometimes makes my head spin. I've been working on this for a couple of hours, but just can't grasp what I'm doing wrong. I'm trying to create a timeline, this single timeline (animations) should be applied to four (or any number) the same classname, but only if that element is in view. Currently it appears to be firing on page load. Even when I get batches to work with a stagger, as soon as I add "animation: animBgReveal" the stagger just stops working and keeps loading them all at the same time. Codepen example attached. In short: the a.work-items should trigger the timeline animation only when that element is triggered (by start: "center center" or something) - not all at once and not on page load. Any idea how to achieve this? Best, Dave