Tween Move and Scaling Issue

[christopherduffy 4 Likes (Newbie)]

Hi,

 

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

[mikel 3,886 Likes (Superhero)]

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

Mikel

 

 

[GreenSock 12,881 Likes (Superhero)]

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!

[christopherduffy 4 Likes (Newbie)]

Thanks for all the responses, the previous method worked for me.

 

This is what I was trying to make.

 

See the Pen xPPEMg by christopherduffy (@christopherduffy) on CodePen