svg finger animation

[Johny13]

Hello guys, this is my codepen and i would like to animate that finger so it looks like it touches screen. Any idea how to do that?

See the Pen RjyPqL by mangicapra (@mangicapra) on CodePen

[PointC]

Hi @Johny13

 

If it were me, I'd create a second version of the finger (or entire hand) with the pointer finger bent towards the screen and then morph between the two versions with MorphSVG:

https://greensock.com/morphSVG

 

You could do it without a morph too. Make each section of the finger its own piece and pivot around the joints. If you want to use a morph and are using AI for your vector work, check out the new Puppet Warp Tool. It makes this kind of thing pretty easy.

 

https://helpx.adobe.com/illustrator/using/puppet-warp.html

 

Just an FYI -- the MorphSVG plugin is part of Club GreenSock. More info:

https://greensock.com/club

 

Happy tweening.