SVGs are awesome – they can be targeted and customized, animated, styled and always stay great looking. Animating them can sometimes be a pain, especially when you want to “morph” one SVG into another. However, the GreenSock library is here to help.

GreenSock

GreenSock is a JavaScript library that creates “ultra high-performance, professional-grade animation for the modern web” . With it, you can create all kinds of effects with ease, such as having 3D transformations, a range of animations, and even casting multiple shadows to text.

From the GreenSock website

Think of GSAP as the Swiss Army Knife of javascript animation…but better. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, generic objects, whatever) and it solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms. Most other libraries only animate CSS properties. Plus, their sequencing abilities and runtime controls pale by comparison. Simply put, GSAP is the most robust high-performance JavaScript animation library on the planet, which is probably why Google recommends it for JS-based animations and every major ad network excludes it from file size calculations. Unlike monolithic frameworks that dictate how you structure your apps, GSAP completely flexible; sprinkle it wherever you want.

MorphSVG

Greenstock offers different plugins to extend the base functionality, such as TextTween and ScrollTo. One of the plugins is MorphSVG, which can animate SVG paths to have a smooth transition between SVG elements. It works by “adding enough points to … get a super smooth morph. It will rip through all that ugly path data, convert everything to cubic beziers, and dynamically subdivide them when necessary, adding points so that the beginning and ending quantities match (but visually it looks the same)”.

How To Use

Using MorphSVG is pretty easy – just pass the IDs of the SVG paths that you want to morph (you can also pass polygon points and path strings).

One thing to note is that you can only morph paths and polygons, however MorphSVG can convert other elements (such as circles) into paths. To do this, it’s simply just passing an ID to convertToPath – pretty easy!

The full docs on MorphSVG can be found here.

How We Used It

In our project, The Curious Case of Benjamin Button, we used MorphSVG to animate the different faces of the character Benjamin.

Our design team created a series of SVG illustrations that represented the age of Benjamin in each chapter of the book. Every animated component (facial features, hat, etc) is in it’s own SVG path element; Green Sock allowed us to morph the shape of these paths to the corresponding path in the next illustration

We are passing on the next SVG path (tag) along with animation time (timeScale – “factor that’s used to scale time in the animation”, its comes with GreenSock).

The SVG of a face kinda look like this, with all the different facial features being different paths and sections, all with IDs so they can be targeted.

This all can be used to where the face goes from stage one to stage two and the elements morph during the transition, all thanks to MorphSVG and GreenSock.

Share to

Related Posts

Dive into the Sanity Structure Builder

By: Mark Biek on 6/13/2021

Sanity is the super fast, super customizable CMS that we're using as the backend for the new via.studio website. One of the more powerful concepts that Sanity is the ​Structure Builder which gives you the ability to customize how content is presented in the Sanity admin.

Read More »
Email
Email @ 50: Email Development
Email @ 50: Email Development

By:Nick Stewart on 8/6/2021

Email development has always been the bane of a web developer's existence. You have to use outdated methods and don't have access to the full modern web to create a nice looking email that thousands of people will see. It's like asking a Nascar mechanic to create a car using only tools from the 90s - it can be done but its more than a pain.

Read More »