Jump to content
Search Community

Target child in stagger callback

joyboy
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

Posted

Hey everyone!
I was just playing with some stagger animations using the stagger `onComplete` callback and noticed it doesn't receives any parameter to access the child or index that is being completed. Besides from custom logic, is there any proper way to access the index / child that is being completed in this example? Spend some time in the docs and didn't see anything straightforward.
 

stagger:{
onComplete: () => {
// target the completed child here
	gsap.to(completedChild){
		opacity: 0
    }
}


Just for reference, I'm dealing with a small bug in a clipPath, after the tween finishes lefts a 1px black line in the clipped image and something like this would solve it easily:

     .fromTo(
            imgContainers,
            {
              '--clip-progress': '100%',
            },
            {
              '--clip-progress': '0%',
              duration: 1,
              stagger: {
                each: 0.1,
                onComplete: (child, index) => {
                // avoid weird 1px line bug
                gsap.set(child, {
                  clipPath: 'none',
                })
              },    
            }
          )

Thanks in advance! ❤️

  • Solution
Posted

Hi you can access the first target in the targets array like so

 

gsap.to(".box", {
  x: 100,
  stagger:{
    each:0.5,
    onComplete:function(){
      console.log(this.targets()[0])
      //fade out each target when it completes
      gsap.to(this.targets()[0], {opacity:0})
    }
  }
});

 

See the Pen JjowpLO?editors=0111 by snorkltv (@snorkltv) on CodePen.

  • Like 1

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...