How is clearProps supposed to work on staggers? (clearProps removed from the docs?)

[katerlouis]

Heyho folks!

 

Long time no read  – Hope you're doing well! Okay okay... I'll cut to the chase–

 

What you see in the codepen is that each box gets reset after its own tween is completed; but since the clearProps is on the "entire tween" I would expect all boxes reset after the stagger is complete.

 

How is `stagger` supposed to work in combination with clearProps? 

 

I'd like to avoid making code more complicated using `onComplete()` to reset all boxes that way; how else would you suggest to clearProps after the stagger is complete?

 

I must be crazy, but I can't find clearProps anywhere in the docs anymore. What's up with that?

 

 

Greetings,

 

René

See the Pen raBZowZ by katerlouis (@katerlouis) on CodePen.

[GreenSock]

Sure, if you want the clearProps to only happen at the very end of the tween for ALL of the staggered elements, just use an onComplete: 

See the Pen raBZREp?editors=1010 by GreenSock (@GreenSock) on CodePen.

 

As for clearProps, that's just for CSS-related stuff, so it's here in the docs: 

https://gsap.com/docs/v3/GSAP/CorePlugins/CSS
 

Does that clear things up? 🙂

[Rodrigo]

Here is the direct link on the docs just in case:

https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/#clearprops

[katerlouis]

Oh boii; ... I was using the left hand sidebar input without realizing it says "filter" and expected it to be the search. searching for `clearProps` on the actual search input of course shows a result... Sorry about that.

 

Having to write the `.box` selector twice does feel nice; isn't there a way to get the tweens selector by doing `this.` inside of `onComplete()`?

[Rodrigo]

Just use a regular function instead of an arrow function in order to get the right this:

function tween() {
  gsap.to('.box', {
    yPercent: 100,
    stagger: {
      from: 'center',
      each: 0.1,
    },
    ease: 'power4.out',
    duration: 1.5,
    onComplete() {
      gsap.set(this.targets(), { clearProps: "all" });
    }
  })
}

https://gsap.com/docs/v3/GSAP/Tween/targets()

 

Another option is to use our toArray method in order to create an array and pass it to the set() instance:

const boxes = gsap.utils.toArray(".box");

function tween() {
  gsap.to(boxes, {
    yPercent: 100,
    stagger: {
      from: 'center',
      each: 0.1,
    },
    ease: 'power4.out',
    duration: 1.5,
    onComplete: () => gsap.set(boxes, {clearProps: "all"}),
  })
}

 

Hopefully this helps

Happy Tweening!