TimeLine Filp-animation doesnt work

Recommended Posts

Hi there :) ,


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

when i execute, 4, { fill: "red", rotationY:180} )

it does the fill, but not the rotation


what am i doing wrong ? :)

Share this post

Link to post
Share on other sites

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, 4, { fill: "red", rotationY:180} )

    Correct syntax is as follows,

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


You can go through this getting started article for quick introduction



  • Like 2

Share this post

Link to post
Share on other sites

k, i solved this by using :


let square = document.getElementById("square")
//do animation, 1, { height: 0, y: 15/*half of the y of your svg viewbox*/ }), 1, { height: 30/*maxheight of your svg viewbox*/, y: 0 })

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.