# Creating spiral animation

## Recommended Posts

Hello guys,

it is really awesome

I need to animate some objects to seem as they are falling in a sink vortex or something like that

I recorded this 2min video to explain everything in it
https://screencast-o-matic.com/watch/crVb3r96Fm

##### Share on other sites

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

• 3
##### 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%

##### Share on other sites

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

 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.

• 3
##### Share on other sites

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

• 3
##### Share on other sites

... and a random version

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

• 2