Using scale during MotionPath path

[rcneil]

I'm reading the docs and it seems there is a way to use "non-positional properties" like scale during a motion path trace, but I am unsure how to implement.  In the Codepen provided, I have 3 circles "orbiting" a path, which is great!  But, I'm hoping to have them scale up and down as they move along path to resize and simulate depth of going forward and backwards, too.  

 

How do you apply the scale transformation during this process?

 

Thanks GSAP community!

See the Pen QWpgGee by rcneil (@rcneil) on CodePen

[elegantseagulls]

Hi @rcneil,

 

You can just add another tween to take care of scaleing. Something like:

gsap.to("#graphic-1", {
    duration:5, 
    repeat: -1,
    ease: "none",
    scale: .2,
    yoyo: true,
  });

would do the trick. Looking at your animation, though here's a few things that could help simplify:
1: Combine the graphics into a single tween and loop/offset them with stagger
2: Comnbine motionPath and scale tweens into a single timeline

 

Check it here:

See the Pen rNywmLX?editors=0010 by ryan_labar (@ryan_labar) on CodePen

[PointC]

I took a slightly different approach. I created a timeline for each circle. (I removed the groups as they aren't really necessary here). This way you can copy/paste in more circles and the animation will adjust accordingly.

 

The secret with the scale tween is just the same as @elegantseagulls did. Make the duration half of the orbit and use a yoyo tween.

 

See the Pen xxqrqby by PointC (@PointC) on CodePen

 

Hopefully that helps. Obviously you can adjust durations and eases to your liking. Happy tweening.

 

 

 

[rcneil]

Thanks a bunch @elegantseagulls and @PointC.  Both approaches are great and help illustrate why this library (and community) are so awesome.