Morph two SVG's

[Tech Nomad]

Hey Guys, 

I need to animate a bouncing transition of two states of an SVG logo. But struggle to find a solution. It seems there is no native CSS transform function like the "envelope distort ---> make with Warp" function in Illustrator CC. I found out you can morph paths with snap.svg but my Logo consist of multiple paths which I want animate synchronously / all together. 

Do you maybe know what I have to look for? 

 

Thank you in advance.

 

These are the two states I have to animate: 

 

[Tech Nomad]

Ok, I found out a way to export the logo as a single path, and the snap.svg bounce animation works indeed. The only problem is that the whole graphic is now fractured/broken:

[Tech Nomad]

Any Ideas?

[mikel]

Hi @Tech Nomad,

 

You can only morph one path (shape) into another - not a bunch of paths into whatever.

You could combine shapes, paths - see also this post.

 

 

See the Pen bOowaa by mikeK (@mikeK) on CodePen

 

Happy morphing ...

Mikel

 

[PointC]

Hi @Tech Nomad 

 

Welcome to the forum.

 

If you want to use the morphSVG plugin for this, you need to have a start and end target path for each morph. You can take advantage of loops to make your life easier. Here's a basic example with three paths. 

 

See the Pen QzqdKN by PointC (@PointC) on CodePen

 

You'd just add any ease you like for that effect. You can also give each path a unique ID and loop through like this:

 

See the Pen LNLpgB by PointC (@PointC) on CodePen

 

The morph plugin is a Club GreenSock perk. More info about that here:

https://greensock.com/club

 

Hopefully that gets you started. Happy tweening and welcome aboard.

 

[GreenSock]

Yep, as the others have suggested, MorphSVGPlugin should make this very doable. Most other tools like Snap.svg don't handle shapes with different numbers of points in them. And we did a ton of work in MorphSVGPlugin to make sure it delivers an intuitive morph between the two shapes (well, as much as a computer algorithm can realistically do). I've included an example below. 

 

Just make sure that you combine things into ONE path. So you'd have one for the "starting" shape, and then another for the "ending" shape, and then just have morphSVG interpolate between them for you. 

 

Happy tweening!

[PointC]

PS I don't think you'd need to morph the weights on the bar unless you plan to distort them a bit. I'd probably group those rectangles and give them a slight rotation and tiny x/y move when the bar bends. Just my two cents worth. Happy tweening.

 

[Carl]

with those demos, its clear PointC is the one doing the heavy lifting around here 

[Tech Nomad]

Wow, thank you for so many replies!

I got this working with the Craigs idea to loop through all the paths. But I still have used snap.svg ? 

I currently can't effort to spent 150$ to just for animating the logo ? Or is it actually only 99$ if I use it for my private but still commercial app? 
But one day I will purchase the membership anyway as I use TweenMax quite often also for the app itself outside the logo animation. 

[GreenSock]

Glad you got it working. 

 

The $99 "Shockingly Green" membership is all you'd need unless multiple customers are being charged for your Work Product. See https://greensock.com/licensing/ and https://greensock.com/why-license/ for details. 

 

Happy tweening!