Jump to content
Search Community

clearProps not clearing properties

Jonathan test
Moderator Tag

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello.. i am trying to clear properties on a tween and/or timeline. But no matter what or where i use it, it wont clear the properties off the element (image).

 

sample code below:

var tl = new TimelineMax({
       paused:true,
       autoRemoveChildren:true,
       onComplete: function(){
            //TweenMax($("img"),{clearProps:"all"});
            TweenMax($("img"),{clearProps:"transformOrigin,transform,scale"});
           }
});

tl.add( TweenMax.to($("img"), 4, {
      css:{
          transformOrigin:"left top",
          scale:1.5
      },
      clearProps: "transformOrigin,transform,scale",
      //clearProps: "all",
      ease: Linear.easeOut,
      onComplete: function(){
            //TweenMax($("img"),{clearProps:"all"});
            TweenMax($("img"),{clearProps:"transformOrigin,transform,scale"});
       }
}) );

tl.play();

and here is my codepen example:

 

as you can see using your browser code inspector/console.. you can see how after the animation completes the transform properties do not get cleared.

 

You can see how i tried 3 ways that are commented out:

  1. the clearProps that is called in the onComplete callback of the Timeline using the set method
  2. the clearProps that is called in the onComplete callback of the added Tween using the set method
  3. and the clearProps  property on the added tween.

No matter which way i try to clear properties, i cant seem to have the element clear the properties GSAP has added.

 

If you check my code pen example commenting out each way you can see how its not clearing the style attribute css properties: transform matrix3d, transform origin or any css that GSAP adds to the element (image).

 

Any help will be highly appreciated!

See the Pen rwFva by jonathan (@jonathan) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi Jonathan,
 
Just a construction problem.
 
The following code is working in your pen:

var tl = new TimelineMax({
paused:true,
autoRemoveChildren:true
});
 
tl .to($("img"), 4, { transformOrigin:"left top", scale:1.5, clearProps:"scale", ease: Linear.easeOut });

In the case of your callbacks they weren't instantiated well, you need to include clear props inside a regular TweenLite/Max or Timeline shorthand method:

onComplete: function(){
	    TweenMax.set($("img"),{clearProps:"all"});
            }

Although this will clear every data and, at least in the logo of your codepen, the image looks quite bigger than the size set in the inline style.
 
Hope this helps,
Rodrigo.

Link to comment
Share on other sites

thanks for the reply.. but even if I clearProps scale.. the values still are not cleared on the image..

if you notice I had the clearProps commented out on the tween.. I tried all 3 ways.. and all at the same time..

because even when I tried the clearProps property on the tween.. it still didnt clear the scale or the transform origin.. I tried clearing the transform since I want all parts of the transform matrix (scale,rotate, and translate) cleared.. i update dmy code pen but still with all 3 , its a no go  :(

when I look in the code inspector the values are still there on the tag and even listed in the dom inspector, even if I have all 3 clearProps uncommented out.. and have it on the timelines onComplete callback.. the tween onComplete callback.. and as a property on the tween.. the transform: matrix() is not cleared..

im not sure why..

 

the only way i can clear the properties is by either removing the style attribute on the image, or using removing the transform matrix property via jQuery

Link to comment
Share on other sites

Hi Jonathan,

 

The thing is that you have some styles assigned to the image therefore they remain as the element's styles rendered by the browser.

 

The engine is doing it's part, which is scale the image to 1.5 times it's size and then remove what has done. But since there are a transform applied by CSS the engine can't remove those, not that I know.

 

mb9o.jpg

 

As you can see you've setted a transform property in your CSS and after the animation has completed those are the values that are in the element's style.

 

I hope this make things more clear in this regard.

 

Rodrigo.

Link to comment
Share on other sites

Yep, the problem is with the transform-origin property not being cleared, and is not working unless you specify "all" in the clearProps.

 

I used a local sample, easier to inspect than codepen, and nothing of the following clears transfomOrigin:

tl.to($("img"), 4, {transformOrigin:"0% 0%", scale:1.5, clearProps:"transformOrigin, scale
", ease: Linear.easeOut});

tl.to($("img"), 4, {transformOrigin:"0% 0%", scale:1.5, clearProps:"transform-origin, scale", ease: Linear.easeOut});

I attached the reduced sample.

 

 

 

I don't know if transform origin is not included in the clear props or if it is a syntax issue.

 

Rodrigo.

Link to comment
Share on other sites

if you check your collab codepen.. i left a comment.. Thanks for the help Rodrgo! :)

 

I found out that in the tween if i use the css: {} property along with clearProps property ... the properties dont get cleared. But once i just declare the css properties without the css: {} property, than the clearProps work.

//////////////////////////////////////////////////////////
// clearProps works without the css: {} in the properties
var tl = new TimelineMax({
       paused:true,
       autoRemoveChildren:true
});
tl.add( TweenMax.to($("img").eq(0), 4, {
          // clearProps does work without the css: {}			 
          transformOrigin:"left top",
          scale:1.5,
	  clearProps: "transformOrigin,transform,scale",
	  ease: Linear.easeOut
}) );
tl.play();

//////////////////////////////////////////////////////////
// clearProps doesnt work with the css: {} in the properties
var tl2 = new TimelineMax({
       paused:true,
       autoRemoveChildren:true
});
tl2.add( TweenMax.to($("img").eq(1), 4, {
      // clearProps doesn't work with the css: {}
      css: {    
          transformOrigin:"left top",
          scale:1.5
      },
      clearProps: "transformOrigin,transform,scale",
      ease: Linear.easeOut
}) );
tl2.play();

i set up another example..

 

you will notice the second box that uses the css; {} property does not clearProps:

 

See the Pen zuAJs by jonathan (@jonathan) on CodePen

 

looks like some type of bug, or maybe that is the way its designed to work, not sure ???

Link to comment
Share on other sites

It just looks like the cross-browser transformOrigin is not being detected in CSSPlugin clearProps at the moment. Using "transform-origin,-webkit-transform-origin" is working though.

 

clearProps is a property of CSSPlugin, so when you use a css:{...} wrapper you need to move the clearProps property inside as well.

 

See the Pen ercEf by jamiejefferson (@jamiejefferson) on CodePen

  • Like 2
Link to comment
Share on other sites

Thanks for the updated info, Jonathan.

 

The second example isn't working because it is malformed.

 

IF you declare a css object then clearProps must go inside it like so:

tl2.add( TweenMax.to($("img").eq(1), 4, { 
      css: {    
          transformOrigin:"left top",
          scale:1.5,
          clearProps: "transformOrigin,transform,scale",
      },


ease: Linear.easeOut
}) );

Here is a forked and fixed version: 

http://codepen.io/GreenSock/pen/14d340ef68b02688b3f84279a1458f42

 

Note the transformOrigin style still remains after clearProps is used in BOTH timelines. Will post back with more info / updates.

  • Like 1
Link to comment
Share on other sites

Thanks for responding!!

 

Cool.. so i guess if i use clearProps and the css: {} property is present, i will make sure it goes inside the css: {} property...

 

I guess we can see why transformOrigin wasn't clearing but least I know about clearProps inside the css: {} when used..

 

That explains it .. Nice .. Thank you Rodrigo, Carl, and Jamie!!! :)

Link to comment
Share on other sites

i did some other tests and noticed that clearProps wont clear properties in IE8 (IE8 standards mode) .. (which is whats used on Windows XP IE8 standalone)  ..even with the working code pens from above... Any ideas on how to get GSAP to clear properties in IE8 (IE8 standards mode)

 

To test, make sure that in the IE inspector, that

 

Browser Mode: IE8

Document Mode: IE8 standards

 

and you will see how clearProps wont clear the properties.. like the filter, etc..

 

If you have Windows 7, then IE10 Standards (if installed will be default)..

 

When you test and if you are using Windows 7, IE10.. it will use the new standards mode, even if IE8 is selected for Browser Mode, you will have to select Browser Mode: IE8, Document Mode: IE8 standards to test it.

 

But the real issue is on IE8 on Windows XP, which is where this problem would occur since Microsoft Internet Explorer only goes up to IE8 on XP. Even though IE8 is at 6% market share.. we still have to deal with this stupid browser for a little while..

 

codepen, jsfiddle, and jsbin might have problems with IE when in IE8 (IE8 standards mode) ..

 

so i attached the files as a zip file below to test in IE8 (IE8 standards mode).. even to test if possible in IE8 (IE8 standards) in Windows XP.  You will see how clearProps wont clear the properties after the animation runs in IE8 (IE8 standards)

 

so any help will be highly appreciated !!!  Thanks ahead of time...

codepen_rwFva.zip

Link to comment
Share on other sites

  • 2 years later...

Just to let you know I had a similar problem trying to clear properties on an element for some reason.

 

So in my case I had to specifically clear the properties using something like this:

 

    $("#bar9 .a2").css("height", "");
 
Interestingly the jquery objects that were just using classes seemed to work fine. So 
 
var improvedBarTwo = $("#bar9 .a2"); //did not work
var improvedArrow = $(".barcontain9 .arrow_box"); //worked fine
 
That said changing the other selctors to use classes did not seem to make a difference?
Link to comment
Share on other sites

  • Solution

When i asked this question IE8 was still supported by Microsoft in 2013. But since Microsoft stopped all support for Windows XP on April 8, 2014. Which means that IE8 will not be supported since that was the highest version on XP. So I no longer debug or use IE8. Also all other major companies or websites no longer support IE8.

 

This was an IE8 bug and nothing wrong with GSAP! So IE8 is no longer an issue and is dead and buried behind the barn. The wicked witch is dead!

 

:)

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

Another approach is to redeclare the variables and then use clear properties on that newly declared variable/object which does actually seem to work!?

 

It is a little tricky to set up a reduced test case as my implementation uses a wider framework for it's slide presentation. One thing I notice is that it seems to work if I redeclare these dom variables/objects and then use clearProps:"all" to clear again? 

 

Will try to reproduce in a reduced case environment if I have a chance.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...