Combining timeline, animation, scrolltrigger and batch

[supp]

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
 

See the Pen MWmMrKR by davedavedave (@davedavedave) on CodePen

[Cassie]

 

Hey Dave,
 

Welcome to the forums. 🥳

I see what you're trying to do here - scrollTrigger batch serves a slightly different purpose though. Think of it as a way to synchronise 'batches' of callbacks for elements as they enter the viewport. 

You can animate multiple elements as they come into view by using a simple loop and creating a scrollTrigger and timeline for each of the elements.

See the Pen XWRLVyK?editors=0010 by GreenSock (@GreenSock) on CodePen

I'm using some utility functions here that are baked into GSAP, because they're super handy! But you could achieve the same with document.querySelectorAll and element.querySelector.

Shout if you have any questions.

Glad you're enjoying the tools.

 

[supp]

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?

[Cassie]

My advice would be to swop the pseudo elements out for spans if possible?

They're pretty complicated to target - browsers don't let us access them the same way as normal elements.

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