How to clearProps in timeline with reverse()?

[AsKadir]

Hi!

Is that possible to clear all props after timeline reversed?

I have no idea how to do it, sorry.

 

Thanks in advance.

 

See the Pen OJVJxZL by ChicagoJostik (@ChicagoJostik) on CodePen

[ZachSaucier]

Hey Aslan.

 

You should keep you code DRY (don't repeat yourself) by using named functions for the click listeners since they are the exact same.

 

To clearProps when the reverse completes, you should be able to do something like this:

onReverseComplete: () => TweenLite.set(tl, {clearProps: true}

 

You're still using GSAP 2... Not recommended  I'm so used to writing GSAP 3 at this point, it's hard for me to switch back to GSAP 2 for all of your questions. Why is it that you haven't switched over?

[AsKadir]

2 hours ago, ZachSaucier said:

Hey Aslan.

 

You should keep you code DRY (don't repeat yourself) by using named functions for the click listeners since they are the exact same.

 

To clearProps when the reverse completes, you should be able to do something like this:

onReverseComplete: () => TweenLite.set(tl, {clearProps: true}

 

You're still using GSAP 2... Not recommended  I'm so used to writing GSAP 3 at this point, it's hard for me to switch back to GSAP 2 for all of your questions. Why is it that you haven't switched over?

@ZachSaucier I can't use GSAP 3, because of ScrollMagic(

So I'm using this here, but nothing changes:

var tl = new TimelineLite({
  onReverseComplete: function() {
    TweenLite.set(tl, {clearProps: true})
  } });

What am I doing wrong?

[GreenSock]

Why would you clearProps on reverse? I don't understand why that would be beneficial. It actually makes the animation look weird because you lose the initial styling in the staggerFrom() and from() calls. They won't get set until those tweens actually start, further down in the timeline. 

 

Yeah, your code above shouldn't work because all that does is set a "clearProps" property on a TimelineLite object (there is no such thing). If you want to clear the CSS from ALL of the child tweens inside of a timeline, you'd need to getChildren() and loop through them and TweenLite.set(animation.target, {clearProps:"all"}) but I really don't think that's useful. It'd be more efficient to just TweenLite.set(".wrapper, body, .menu li, .social", {clearProps:"all"}), meaning just pass in all your targets to one tween in the onReverseComplete. I highly doubt that's really gonna give you the effect you desire (but I may be misunderstanding your goal). 

 

Could you explain your goal please? 

[AsKadir]

6 minutes ago, GreenSock said:

Why would you clearProps on reverse? I don't understand why that would be beneficial. It actually makes the animation look weird because you lose the initial styling in the staggerFrom() and from() calls. They won't get set until those tweens actually start, further down in the timeline. 

 

Yeah, Zach's suggestion wouldn't work because all that does is set a "clearProps" property on a TimelineLite object (there is no such thing). If you want to clear the CSS from ALL of the child tweens inside of a timeline, you'd need to getChildren() and loop through them and TweenLite.set(animation.target, {clearProps:"all"}) but I really don't think that's useful. It'd be more efficient to just TweenLite.set(".wrapper, body, .menu li, .social", {clearProps:"all"}), meaning just pass in all your targets to one tween in the onReverseComplete. I highly doubt that's really gonna give you the effect you desire (but I may be misunderstanding your goal). 

 

Could you explain your goal please? 

@Jack As you can see in my example, there is a matrix of wrapper in px,

so if screen size is changing, this value will be static.

I understand that I can use fromTo with xPercent and etc, and if screen size will be changed,

everything will be ok.

But in my project I had more than these values, and somewhere I can't use fromTo.

That's why I'm asking it.

So as I understand I should use this onReverseComplete:

TweenLite.set(".wrapper, body, .menu li, .social", {clearProps:"all"})

Thanks!

[GreenSock]

Oh, if you're trying to get the tweens to forget their internally-recorded start values so that on the next render they grab things based on the current state (like if the window resized), all you've gotta do is call invalidate() on the timeline (or tweens). Is that what you're looking for?