Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Tween Move and Scaling Issue

Recommended Posts



I'm trying to make an element tween from off screen and land on a point while scaling down.


I currently have the element scaling down and moving position but I don't want it to start scaling down until it gets closer to the red box.


Any advice or guidance would be great.


See the Pen gXogbV?editors=0010 by christopherduffy (@christopherduffy) on CodePen

Link to comment
Share on other sites

Hi @christopherduffy,


this could be a way ...


See the Pen wPpdBQ by mikeK (@mikeK) on CodePen


In a timeline two separate animations, the second positioned 0.2 (see this).

You can control it by the GSDevTools (see here) ...


Happy tweening




  • Like 2
Link to comment
Share on other sites

You could just separate that part into a different tween that has a longer delay, like:

TweenMax.to("#box", .5, {delay:2, x:615, y:615});
TweenMax.to("#box", 0.2, {delay:2.3, scale:1});


Of course you could easily set it up in a timeline if you prefer:

var tl = new TimelineLite({delay:2});
tl.to("#box", .5, {x:615, y:615})
  .to("#box", .2, {scale:1}, "-=0.2");


I personally find it easier to set things up in their end states and then use from() tweens to animate them into place instead of doing the math to figure out the opposite. So if I were you, I'd do it like this: 


See the Pen 0d88d67675e0274e82151e4586859b95 by GreenSock (@GreenSock) on CodePen


Happy tweening!

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