Button to line to SVG animal morph

[stevenha]

Can you think of a way to take a bootstrap'ish button, containing arbitrary letters inside,  and morph it into a horizontal line, then morph to a SVG animal like a bunny,  then reverse the process back to a button?    I want something entertaining that also prevents people clicking on a button too often.

[PointC]

Hi @stevenha

 

If I understand your question correctly, you'd just need three paths (button shape, line and bunny) and simply morph between them. The text on the button could fade out during the morph and then fade in once you morph back to the original button shape. If you have something specific in mind, could you please create a CodePen demo for us?

 

Here's some info about that.

You can find all the Club plugins for use on CodePen here:

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

Happy tweening.