Share Posted November 18, 2017 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 post Share on other sites
Share Posted November 18, 2017 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 2 Link to post Share on other sites
Share Posted November 18, 2017 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! 3 Link to post Share on other sites
Author Share Posted November 18, 2017 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 2 Link to post Share on other sites