TimeLine Filp-animation doesnt work

[maxbaum]

Hi there ,

 

i want to animate an svg rectangle so it flips one time. Back and front have the same color.

when i execute

this.Timeline.to(square, 4, { fill: "red", rotationY:180} )

it does the fill, but not the rotation

 

what am i doing wrong ?

See the Pen qpjpNv by anon (@anon) on CodePen.

[Sahil]

Unfortunately, you can't perform 3D animations on svg so it only supports rotation. Other things I noticed in demo,

 

1. You need to use library files for any animation to work, in your pen you aren't including TweenMax. It can be done by clicking on settings > Javascript > there you can select files or search to include.
2. You were using incorrect syntax

   this.Timeline.to(square, 4, { fill: "red", rotationY:180} )

   Correct syntax is as follows,

   //TweenMax syntax
   TweenMax.to(element, 1, {});
   
   //For timeline first you have to create instance and then add tweens to it
   var tl = TimelineMax();
   
   tl.to(element, 1, {});

    

You can go through this getting started article for quick introduction https://greensock.com/get-started-js

 

See the Pen jYwYaa by Sahil89 (@Sahil89) on CodePen.

 

[maxbaum]

k, i solved this by using :

 

let square = document.getElementById("square")

//do animation

this.Timeline.to(square, 1, { height: 0, y: 15/*half of the y of your svg viewbox*/ })

this.Timeline.to(square, 1, { height: 30/*maxheight of your svg viewbox*/, y: 0 })