Triggering Scale at specific point on path
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 extreme
.thumb.jpg.1de5e1154e25424b5f62949d5d3d311b.jpg)
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}
