Jump to content


TimeLine Filp-animation doesnt work

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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

Link to comment
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
    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


  • Like 2
Link to comment
Share on other sites

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 })
Link to comment
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.