Is it expected behaviour that an element’s style is different after an animation?

[rmschindler]

I noticed, when I animate an element, that afterwards, there are extra style parameters on the element, such as `rotate: none` (even though rotation was never applied). I’m wondering if this is how GSAP is supposed to work.

[Toso]

i think you need to check this one 

 

 

[rmschindler]

Thanks, Toso: I can use `revert`. I am still curious whether it is expected that an element retain style properties which GSAP put in. If I were designing an animation library, I would find it ‘dirty’. I’m curious: is this something on the radar to be improved? I’m really asking the developers here.

 

I have an impression that GSAP is pretty slick. That impression is a bit eroded by finding out that an element gets muddled with properties simply from being ‘touched’ by GSAP.

[GreenSock]

2 hours ago, rmschindler said:

I noticed, when I animate an element, that afterwards, there are extra style parameters on the element, such as `rotate: none` (even though rotation was never applied). I’m wondering if this is how GSAP is supposed to work.

Yes, that's completely normal. The reason it must do that is because modern browsers introduced individual transform components which can interfere with "normal" ones. For example:

 

/* standard */
transform: rotate(45deg);

/* newer alternate */
rotate: 45deg;

For maximum compatibility and performance, GSAP always uses "transform" (only). But imagine what would happen if you had CSS like this: 

.box {
  rotate: 45deg;
}

And then you do this: 

gsap.to(".box", {
  rotation: 90
});

Which would result in the inline style like this: 

<div class="box" style="transform: rotate(90deg)"></div>

Great, but now it has a "transform" inline, AND a CSS rule that says rotate: 45deg. DOH! What's the browser supposed to do? Combine/Add them together (135deg)? Completely ignore one of them even though they're different CSS properties? Browsers are notorious for making those decisions differently, so for example maybe Chrome would have the transform override the rotate, and Firefox may make the rotate override the transform. And maybe Safari would combine them. So we add those inline styles to ensure complete uniformity and compatibility. 

 

Does that clear things up? 

[GreenSock]

7 minutes ago, rmschindler said:

I have an impression that GSAP is pretty slick. That impression is a bit eroded by finding out that an element gets muddled with properties simply from being ‘touched’ by GSAP.

In case my previous explanation didn't make it clear enough (we typed our responses at the same time )...

 

It's not "muddled" - it's protected. If we didn't put those there, your element could suddenly jump when the GSAP animation ends if you've got CSS rules somewhere that affect the element. See what I mean?

 

If you really need to remove those, you could use clearProps. But I'm curious: is there some real-world symptom you're wrestling with related to these inline styles? 

[rmschindler]

Ah, yes, I see (—I had a feeling there was sound reasoning behind it).