Search code examples
javascriptgsap

GSAP scaleX appearing out of sequence in timeline

I am new to GSAP and am putting together a 2.5D rotating coin using GSAP scaleX and x.

The coin is meant to a) "rotate" in the tails side, then b) rotate out the tails side, then c) rotate in the heads side, then d) rotate out the heads side, and then the loop of the sequence begins the rotate in of the tails side again.

I have gotten the animation as far as c), but when I try to use scaleX to start d), something happens to the timeline and the "heads" side of the coin appears from the very start of the animation.

I have included a codepen here: https://codepen.io/bamartelly/pen/RgayML

If you un-comment lines 103 to 108 (pasted in below too) you can see the animation breaking when I try to start implementing step d).

      .fromTo(coin.heads, flipTime,{
        scaleX:1,
        x:0
      } , {
        scaleX:0,
        x:8
      }, "headEnd")

Any help greatly appreciated. Thanks!

Solution

  • I suspect it's an immediateRender thing - please see http://greensock.com/immediateRender. Try setting immediateRender:false on that fromTo() tween.

    Happy tweening!