Jump to content
GreenSock

dylan9o4

To Morph, or to Transform?

Go to solution Solved by OSUblake,

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

Hey guys,

 

I'm trying to figure out how to make this fish vector appear to make a flopping in-air animation.

At first I was thinking that MorphSVG would be the ideal tool for this, but then diving deeper I'm noticing that there's so many paths I believe I would have to find an ideal shapeIndex for each to get a fluid motion. Transform gives off the whole 2D vibe since I'm using scale -1 to give the appearance of a reflection during the flopping animation.

 

This is a link to a primitive attempt to use MorphSVG

 

And this is a link to a primitive attempt using regular transforms

See the Pen dNQdxe by dylan9o4 (@dylan9o4) on CodePen

 

Any help would be greatly appreciated!

See the Pen bgQLyP by dylan9o4 (@dylan9o4) on CodePen

Link to comment
Share on other sites

So good indeed, thanks for sharing Blake!

 

Iv'e added "aquatic" as a tag as well in case someone else might search, I wasn't sure of a great term like that.

I will update and edit this post with an example once I get up-to speed on the docs and get my working example.

 

Thanks again Blake, and awesome GSAP community!

  • Like 1
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.
×