Jump to content
Search Community

Reverse the animation of width sinking instead of from right to left make it left to right.

WarenGonzaga test
Moderator Tag

Go to solution Solved by ohem,

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

I want to reverse the animation of width animating from 200px to 0px in this manner sinking from left to right.
The codepen below is sinking from right to left is it possible to reverse this? Thanks!

 

JavaScript:

window.onload = init;

function init() {
  TweenMax.to("#box", 0.5, {width: 0});
}

CSS:

#box {
  background: blue;
  width: 200px;
  height: 500px;
  position: absolute;
}

This codepen will explain.

Link: 

See the Pen kXoayv by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

Link to comment
Share on other sites

You can do that with TimelineMax using reversed: true in the constructor.

 

Click Run to see the animation play:

 

See the Pen NAvWma by jonathan (@jonathan) on CodePen

 

Also any time you animate properties like width and height you want to add the GSAP special property autoRound: false. This will allow the width to be animated on a sub-pixel level, instead of whole numbers.

 

Resources:

TimelineMax reversed: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

CSSPlugin autoRound: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • Like 1
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...