Search code examples
javascriptcsssassgsap

CSS animation overwriting Greensock tweens

I have a GSAP TweenMax timeline where im selecting the SVG polygon with id #plane and animating it using timeline. If however I put in the css '#plane{animation: fly-plane 2s 0s 20 alternate ease-in-out forwards;}' then the css overrides and turns off the GSAP animation completely. Is this normal? I haven't found other posts about this so I'm guessing not?

var plane = document.querySelector("#plane"),
  tl = new TimelineMax({ repeat: -1 });

tl.to(plane, 1, { xPercent: 50, width: 200, autoAlpha: 0.5 });

@keyframes fly-plane {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(100px);
  }
}

#plane {
  animation: fly-plane 2s 0s 20 alternate ease-in-out forwards;
}

It has the same behaviour with classes btw

Solution

  • Yep, that sounds pretty normal - you're telling CSS to animate to completely different values than GSAP on the same property (transform) of the same element. So they're fighting for control. I'm confused about what you expected to happen.

    The width and opacity should still be controlled by GSAP, though, since you're only causing a fight with "transform" :)

    If you need any more help, the best place is probably the dedicated forums at https://greensock.com/forums/

    Happy tweening!