Issues clearing tweens

[padders]

Hi Guys, 

 

I'm having a little issue clearing the properties of my tweens. I've setup a codepen to test out some fade in animations for sections of a page, and I'm trying to use clearprops (line 36 of the js in the codepen) to reset all the possible values in all my different fade in animations.

 

gsap.set([title1, para1, para1_2, title2, para2, para2_2], {clearProps: 'opacity, left, top, x, y, z, rotateX, rotateY, scale, transform'});

 

To demonstrate, if you set the title1 animation to be Flip_In_Y, or Animate_From_Left_Big, then scroll down to activate the animation. Scroll back to the top and press the Reset button. I want this to apply the filters from the buttons (which is working) and then remove all the styling applied by the GSAP tweens I've previously made.

 

Clearprops works fine for opacity, but when I'm trying the fade in animations for Flip_In_Y, or Animate_From_Left_Big, it doesn't remove that style attribute, it merely sets them to 0. So for Animate_From_Left_Big, it sets the style attribute to "left: 0px". I'm sure I'm doing something dumb, is there a way to remove all GSAP tweens and there applied styling to everything on the page? I've also tried the following, but that didn't work well either!

 

gsap.killTweensOf([section1, title1, para1, para1_2, section2, title2, para2, para2_2]);

 

See the Pen XWXdrWV?editors=0010 by padders1980 (@padders1980) on CodePen

[ZachSaucier]

Hey padders. Why not use clearProps: true?

 

But anyway, clearProps does not currently allow spaces. We also recommend setting only CSS properties. So you could use 'opacity,left,top,transform' instead of true.

[padders]

See, knew I was being dumb.

 

You're a star