maxbaum

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

this.Timeline.to(square, 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
    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

 

 

  • 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
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 })

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.