Triggering Scale at specific point on path

[mtbroomell]

Hello all,

 

Here is a codepen for my demo - 

Those red squares represent lottie animations which actually, for once, aren't the problem. They travel around a path using motionPath that is essentially a rounded trapezoid. I am trying to create an illusion of depth: when the box gets to the far right on the bottom row and starts moving up, I want it to begin scaling down to 75% and reach that size when it begins travelling left at the top.

My other efforts to this were extremely non-performant, involving checking absolute path locations inside of onUpdate which just battered the main thread. 

How would you all do this? Thanks so much!

See the Pen mdavYPm by Mark-Broomell (@Mark-Broomell) on CodePen

[Rodrigo]

Hi @mtbroomell and welcome to the GSAP forums!

 

@Carl has a great example of something similar:

See the Pen JjwJrqq by snorkltv (@snorkltv) on CodePen

 

He also flashes all his teaching abilities in dissecting how to arrive to that result in this video:

 

Hopefully this helps.

Happy Tweening!

[mtbroomell]

Hi Rodrigo, thanks for weighing in! It gets close, but the yoyo approach doesn't work making the illusion of depth. Great content though.

[mtbroomell]

So this post actually comes somewhat close! 

However that example only works because there is one item sitting on a circular path and not several items evenly distributed along the path. Hope that helps to give some perspective.

[GreenSock]

Yeah, I definitely wouldn't be doing a ton of calculations inside an onUpdate and swapping classes or something. I'd probably just figure out the spots at which the scale should change (like keyframes) along the progress of the path and then create a separate scale animation for that: 

 

const scaleValues = [
  {progress: 0, scale: 0.5},
  {progress: 0.05, scale: 0.4},
  {progress: 0.27, scale: 0.4},
  {progress: 0.48, scale: 1},
  {progress: 0.85, scale: 1},
  {progress: 1, scale: 0.5}
];

 

And you probably don't need them all in a timeline. Think of it like each one is an infinitely repeating tween that's going along the same path, but you start them at different progress values: 

 

See the Pen ZEVZJpK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps. 

[mtbroomell]

Wow, that's exactly it! Thanks Jack, I hadn't thought of just staggering them out as separate animations with different start points.