Jump to content
GreenSock

yasserzakaria1993

Creating spiral animation

Recommended Posts

 

Hey @yasserzakaria1993

 

With that second part of the animation you mean something like this?

 

See the Pen ZGmeRO by danwilson (@danwilson) on CodePen

 

 

I think that should be achievable with GSAP's MotionPathPlugin

 

 

 

I myself am not very experienced with it, but there are quite a few demos, that should get you on the right track.

 

If you run into any more specific questions along the way, let us know :) 

 

 

Hope this helps for now.

 

Cheers,

Paul

  • Like 3
Link to comment
Share on other sites

Thanks @akapowl for the fast response

In the provided example all the objects are starting the animation from the path start point

but I have many objects that will touch the path in deferent points and need to start from this point

do you know how to calculate the touching point 

so I can animate from it to the end of the path rather that animation from 0 => 100%

Link to comment
Share on other sites

Sounds like you're looking for the start/end properties of the MotionPath plugin.

 

https://greensock.com/docs/v3/Plugins/MotionPathPlugin

 

start Number - The position along the path at which to start, where 0 is the beginning and 1 is the end and 0.5 is the middle. It can be any positive or negative decimal number. For example, 0.3 would start the element at the 30% point along the curve. Default is 0.
end

Number - The position along the path at which to end, where 0 is the beginning, 1 is the end, and 0.5 is in the middle. It can be any positive or negative decimal number, including a value that's less than the start (which would make the object travel backwards). For example, 0.3 would have the element end at the 30% point along the curve. 1.5 would make it loop around back to the beginning and stop at the halfway point. Default is 1.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Hey @yasserzakaria1993,

 

Your first task (calculating the random start point) is a little more complicated.

For the second, you could create individual spirals. Maybe for the option also.

 

See the Pen yLaZaNZ by mikeK (@mikeK) on CodePen

 

Happy rotating ...

Mikel

  • Like 3
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.
×