Creating spiral animation

[yasserzakaria1993]

Hello guys,

congrats for your w=new plugin
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

thanks in advance for your help

[akapowl]

 

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

[yasserzakaria1993]

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%

[PointC]

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.

[mikel]

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

[mikel]

 

 

... and a random version

 

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