Jump to content
Search Community

Button to line to SVG animal morph

stevenha test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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.

:)

  • 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.
×
×
  • Create New...