Resize failure on CSS props

[mk1]

I've read everything I could find here, and now I got completely stuck.

 

I tried: invalidate(), kill(), killAll, clear(), .set + ClearProps, etc. and I am unable to recalcualte css inline stylining on resize. 

<div class="br-wrapper__section br-section--anime br-section--one" style="visibility: inherit; opacity: 1; transform: matrix(1, 0, 0, 1, -398.5, 0);">

        <div class="br-wrapper__section__content br-wrapper__section__content--single">
            <h1>
                Office haircuts for both men and women.
            </h1>
        </div>

    </div>

Only location.reload works fine... I really need to find a solution on this

 

Is there a way to get rid of these css styles or they always be rock solid?

[Dipscom]

Hey mk1,

 

I can see this is relevant to that site you're working on. Right out of the bat, I won't go wading into all of that code... Soz again.

 

ClearProps() really should remove all GSAP introduced inline styles. It will depend on when and where you are calling it and what is being done afterwards. Are you re-creating the tween or just playing it again? If it's a window resize, you will probably have to flush the relevant tweens and recalculate them.

[OSUblake]

If clearProps isn't working, make a demo.

 

And have you tried doing what I showed you here?

https://greensock.com/forums/topic/15694-resetting-timeline-and-tween-on-resize-not-working-as-expected/?p=68420

 

If you really want to clear all inline styles, you can do this...

myElement.style.cssText = "";

.

[Jonathan]

Hello mk1, and Welcome to the GreenSock Forum!

 

You would usually kill() the timeline and then clearProps:

 

clearProps works, it just depends if you are setting other properties when your trying to remove CSS properties inline on the tag, that could cause a conflict.

 

This should work to clear all inline properties:

TweenLite.set(yourElement, {clearProps:"all"});

Or use inside an onComplete

// used within the tween
TweenMax.to(yourElement, {
    x: -398.5,
    autoAlpha: 1,
    clearProps:"x,autoAlpha" // or use "all"
});

// or use a special callback like onComplete
TweenMax.to(yourElement, {
    x: -398.5,
    autoAlpha: 1,
    onComplete:{
          TweenLite.set(yourElement, {clearProps:"all"}); // or use "x,autoAlpha"
    }
);

If you notice it not working then a codepen example will help us see what might be happening. If there is a conflict with other code on the page.

 

How are you setting your CSS transform to when the page first loads?:

• is it already CSS inline on the element?
• is it in the CSS stylesheet?
• Is it being applied outside with GSAP and not with a GSAP method like to(), from(), set(), etc... ?

There are a couple of things you can do.

• You can set() clearProps inside a special callback onComplete so it runs after your tween completes
   
• With clearProps you can clear all by passing all .. clearProps: "all" inside your tween.
   
• Inside your tween use parseTransform: true found in CSSPlugin Docs:
  
  parseTransform:
  All transforms are cached in a _gsTransform object attached to the element, so you can tween individual properties without worrying that they'll be lost. You don't need to define all of the transform properties on every tween - only the ones you want to animate. You can read the transform-related values anytime, like element._gsTransform.scaleX. If you'd like to clear those values (including the transform applied to the inline style of the element), you can do TweenLite.set(element, {clearProps:"transform"});. If you'd like to force GSAP to re-parse the transform data from the css (rather than use the data it had recorded from previous tweens), you can pass parseTransform:true into the config object.

Please see CSSPlugin Docs:

 

https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

• clearProps
  A comma-delimited list of property names that you want to clear from the element's "style" property when the tween completes (or use "all" to clear all properties). This can be useful if, for example, you have a class (or some other selector) that should apply certain styles to an element when the tween is over that would otherwise get overridden by the element.style-specific data that was applied during the tween. Typically you do not need to include vendor prefixes.
  

  //tweens 3 properties and then clears only "left" and "transform" (because "scale" affects the "transform" css property. CSSPlugin automatically applies the vendor prefix if necessary too)
  TweenLite.from(element, 5, {scale:0, left:200, backgroundColor:"red", clearProps:"scale,left"});
  

 

If you are still having an issue please create a limited codepen so we can test your code live.

 

 

Also see this post:

 

https://greensock.com/forums/topic/7183-inline-tween-styles-remain-even-when-clearinginvalidating/#entry26778

 

Thanks