Scale animation on TimeLineLite.from not working

[shared]

Hi !

 

I got this simple JS lines

tl = new TimelineLite();
tl
    .from(A_shape_intro, 2, {scale:4, ease:Expo.easeOut}) <--- this line is not working
    .call(runTimelineAnim, [arrayAnim, runingPattern])
    .staggerTo("#logo svg:not(svg[data-elem='A_shape2'])", 1, {opacity:1, top:0, ease:Expo.easeOut}, 0.2, "+=1.5");

SCSS

svg[data-elem="A_shape_intro"]{
  top:0;
  transform:scale(1);
  opacity:1;
}

Problem:

My "A" svg shape is suposed to scale out from 4 to 1, but there is nothing animated, the A apeared scale to "1" value without any animation. It used to work, but for some reasons its not working anymore. Why ?

 

PS:  the console is clean, no JS errors..

 

Thanks for answering me ASAP !

[Carl]

Sorry, its impossible to know what is wrong just from seeing that code. My guess is something is wrong with how you are selecting the element.

Please provide a reduced demo as described here: 

You can just edit the demo below, save and send us the link. Thanks! (run pen, click "edit on codepen").

 

See the Pen owbMPX by GreenSock (@GreenSock) on CodePen

 

[GreenSock]

One other thought: If you're animating an SVG element, GSAP will (by default) apply those transforms to the "transform" attribute instead of the CSS property because that's what the SVG spec suggests and there are a lot of bugs with CSS properties on SVG elements. I bet that you've got a CSS transform applied and you're looking at a browser that's prioritizing that over the transform attribute. 

 

In other words, if the CSS says transform:scale(1) and the transform attribute says transform="scale(4)", the browser has to decide which one "wins". See what I mean? 

 

We always recommend setting transforms via GSAP because it improves performance and is more reliable. I'd get rid of your CSS that's setting the transform.