Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Using scale during MotionPath path

Recommended Posts

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

Link to post
Share on other sites

Hi @rcneil,


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

gsap.to("#graphic-1", {
    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

  • Like 6
Link to post
Share on other sites

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.





  • Like 6
Link to post
Share on other sites

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

  • Like 4
Link to post
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.