clearProps on reverse()

[andyr 1 Likes (Newbie)]

Hello

 

I've got a modal which appears on a button click.  I use clearProps to remove inline styles.

tl.add(TweenLite.from('.ng_modal_dialog', 2, {left: "30%", backgroundColor: "red", clearProps: 'all'})); 

Then I do reverse().  Which adds them all back again. Can I clearProps after I've done reverse()?

 

Thank you.

[Diaco 1,948 Likes (Superhero)]

Hi andyr 

 

pls try this : 

var anim = TweenMax.to('.mydiv',1,{x:200,backgroundColor:'blue'});

$("#backBtn").on("click", function(){
  anim.reverse().eventCallback("onReverseComplete", function(){ 
      TweenLite.set(this.target,{clearProps:'all'});
  });
});

See the Pen MwYJXo by MAW (@MAW) on CodePen

[andyr 1 Likes (Newbie)]

Thanks.

 

That clears the properties.  Now I need to hide and reset, so that the animation plays again from the start. 

 

Edit: I'll start a new thread, as the original request was solved.

[Carl 9,066 Likes (Superhero)]

I know this is answered expertly already by Diaco, especially for a single tween.

If you are using timelines, you can also put a set() at the beginning.

 

anim.set('.mydiv', {clearProps:"all"})
    .to('.mydiv',1,{x:200,backgroundColor:'blue'});


$("#back").on("click", function(){
  anim.reverse();
});

 

EDIT: http://codepen.io/GreenSock/pen/QbwaMO

[OneManLaptop 10 Likes (Newbie)]

Just a quick addendum to this. Is there any way to use clearProps and have it clear all GSAP traces from each element tweened in a timeline, without having to list every element separately that you want cleared? Thanks.

[mikel 1,823 Likes (Superhero)]

Hi @OneManLaptop,

 

Maybe the hints in this topic will help:

 

 

Best regards

Mikel

 

 

[OneManLaptop 10 Likes (Newbie)]

Cheers.