joyboy Posted March 13 Posted March 13 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 Carl Posted March 13 Solution Posted March 13 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. 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now