Note: the special version of the plugin will only work on the CodePen domain. CodePen is a fantastic way to experiment. Try MorphSVGPlugin for free on CodePen! There's a special version of MorphSVGPlugin that we link to in our demos in our MorphSVGPlugin Collection on CodePen, so feel free to fork any of them, add your own SVG graphics, and take MorphSVGPlugin for a spin. To download MorphSVGPlugin, just log into your account dashboard and grab the latest version of GSAP. It's our way of showing our gratitude to those who are fueling innovation at GreenSock. MorphSVGPlugin is a bonus plugin for Club GreenSock members ("Shockingly Green" and "Business Green" levels). View the official docs here for a full breakdown of the API. To learn how to include MorphSVGPlugin into your project, see the GSAP install docs. This function provides an interactive user interface to help you visualize where the start point is, change it and preview the animation. To make things easier we have created a stand-alone utility function called findShapeIndex(). to ( "#circle", ) Įxperimenting with shapeIndex can be a bit of a guessing game. You can morph a circle into a hippo with a single line of code: MorphSVGPlugin does a ton of heavy lifting so that you don't have to. Instead of passing in raw path data as text, you can simply feed in selector text or an element and the plugin will grab the data it needs from there, making workflow easier. This affects what the inbetween state looks like during animation. Optionally define a "shapeIndex" that controls how the points get mapped. Use either linear interpolation (the default) or a newer "rotational" type to get more natural looking morphs There's a utility function, nvertToPath() that can convert primitive shapes like, ,, ,, and directly into the equivalent that looks identical to the original and is swapped right into the DOM.ĭraw the resulting shape to (via a render function or set a faultRender) Morph data even if the number (and type) of points is completely different between the start and end shapes! Most other SVG shape morphing tools require that the number of points matches.
First, let's cover what this new plugin can do: It has never been easier to morph between SVG shapes.
0 kommentar(er)
