Jump to content
Search Community

Scale circle to follow the shape size while rotating along the path

marko krstic test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

You're on the right track....


A few things to not: You don't want to have repeat: -1 in the defaults... You also need to translate the X and Y percentages as the shape scales since it's an SVG shape, and those are on their own coordinates.

 

This should get you closer:

See the Pen RwBNGPK?editors=1010 by elegantseagulls (@elegantseagulls) on CodePen

  • Like 4
Link to comment
Share on other sites

  • Solution

Probably easier to loop through and give each one its own timeline.

 

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

 

I also used the GSAP utils.toArray method to select the <rect> targets. That way you don't need to manually create an array or give each one its own ID. You can add as many rectangles as you want and it'll still work as the delay is based on the length of the array. I added a few just for fun.

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

@PointC Just a one more quick question if you have time

I managed to add multiple elements (dots) so animation looks more dynamic, 
But issue is that I am having now is moving around that path is working but scale is ignored.

If you can please give me some pointer. 

See the Pen JjBoREY by krstivoja (@krstivoja) on CodePen



Thank you! So much simpler solution than my overthinking and brain frying solution. 
Looks awesome now!

Link to comment
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.
×
×
  • Create New...