Jump to content
Search Community

TimeLine Filp-animation doesnt work

maxbaum test
Moderator Tag

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

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.
×
×
  • Create New...