Jump to content
Search Community

Tween Move and Scaling Issue

christopherduffy 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

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

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 ?editors=0010 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.
×
×
  • Create New...