dylan9o4

Just wanted to let you know your findShapeIndex demo isn't working properly. Need this to see if the morphSVGPlugin is right for me, so when you get the chance it be awesome if this could be resolved. Thanks.

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!

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 http://codepen.io/dylan9o4/pen/bgQLyP And this is a link to a primitive attempt using regular transforms http://codepen.io/dylan9o4/pen/dNQdxe Any help would be greatly appreciated!

Assuming all the paths are in the same order for both group elements you're wanting to morph from/to, you could loop through the children of the group element like this... This is intended for paths only. var TL = new TimelineLite(); var pathsBefore = document.getElementById("g-before").children, pathsAfter = document.getElementById("g-after").children; for (var i=0; i < pathsBefore.length; ++i) { TL.to(pathsBefore[i], 1, { morphSVG: pathsAfter[i] }, 0) }

My only addition to Jonathan's more extensive answer would be to never allow your text above a scale of "1", as that's when the blurring tends to occur in the browser. Even In the example provided above, if you were to set the scale above 1.0, you can see the blurring. So I would suggest setting the font-size initially to a large size, and adjust freely to scales beneath 1.0 Just thought it was worth noting.