Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kathryn.crawford

Morph multiple polygons in an SVG

Recommended Posts

I've got a complicated background image that I want to move subtly. I was thinking I could morph it back and forth between a few different versions, with the same number of polygons, but slightly different points/colors. As far as I can tell (I'm new to GSAP) morphsvg will only take one svg element and morph it into another, but doesn't morph one full svg into another. Maybe I can loop through an array of polygons in the svg to morph, but I think that would take forever and really bog down the site. I don't have to use morphsvg of course, but I can't think of anything else really that would give me a nice slightly shifting effect. 

See the Pen avwRXL by kathryncrawford (@kathryncrawford) on CodePen

Link to comment
Share on other sites

That would be a pretty cool effect indeed. But you're right - it may require some intricate loops/logic to get the paths/polygons all matched up. But I guess if you use the same artwork and just tweak some points around and re-save a few times, all of them would have exactly the same IDs and order, so it may be easier than you think to get them matched up. I'm not entirely sure how stellar performance would be though. I'm not worried about GSAP - the biggest CPU-drain (by FAR) is going to be the actual graphics rendering in the browser which has nothing to do with GSAP. It may be fine; it's tough to say without experimenting. But since SVGs are just vector graphics whose pixels are dynamically generated on-the-fly, it's more work than just shifting a PNG around. Canvas may actually be a better bet for the effect you're after. 

 

I was originally worried that the cape-flapping effect I used at the top of the main MorphSVGPlugin page (http://greensock.com/morphSVG/) might be stuttery, but it ended up being silky-smooth even on my mobile devices so that's a positive sign. But your artwork looks a LOT more complex and uses way more screen real estate (meaning more CPU-demanding). But again, it may be fine. 

 

Actually, the least CPU-intensive option would be to create a bunch of frames (either dynamically via canvas or load PNGs or something) and play them in quick succession. Maybe even video. But of course that requires a lot more kilobytes (unless you generate them dynamically which would be kinda cool). 

  • Like 2
Link to comment
Share on other sites

Thanks Jack! I like the canvas frames idea, and think I might try it. As always, you guys are the best!

  • Like 1
Link to comment
Share on other sites

Are you trying to do something like this?

 

See the Pen 4025b6b55ef0f8be2e185f829fed958e?editors=001 by osublake (@osublake) on CodePen

 

Notice how I have a point class, and a point can be shared between different polygons. By animating one point, we can change the shape of several different polygons. I'm just choosing random coords to move a point to, but you could explicitly set them. You could also have more than 3 points in a polygon. I was just trying to keep it simple. And animating the color of a polygon could be achieved the same way I am animating a point.

  • Like 4
Link to comment
Share on other sites

@OSUblake, yes! Just on a much bigger scale. I think if I did that with my svg it would be way too much code, but maybe not. I'll give it a shot!

Link to comment
Share on other sites

It will definitely run much better on canvas. The only potential bottleneck that I see for your design is the gradients. If you notice that they are slowing it down, you might want to render them as images. You could do texture mapping to make your images conform to a shape.

 

Here's a cool demo I just came across that you might be able to pick apart if you need help.

 

 

See the Pen MaYZwR?editors=001 by ge1doot (@ge1doot) on CodePen

Link to comment
Share on other sites

Oh yeah, I totally forgot about that McDonalds one. I just quickly looked at some of their code, and it looks like they are doing something with scaling to create that effect. Not sure how that would work, but it looks amazing.

Link to comment
Share on other sites

That's genius

It will definitely run much better on canvas. The only potential bottleneck that I see for your design is the gradients. If you notice that they are slowing it down, you might want to render them as images. You could do texture mapping to make your images conform to a shape.

 

Here's a cool demo I just came across that you might be able to pick apart if you need help.

 

 

See the Pen MaYZwR?editors=001 by ge1doot (@ge1doot) on CodePen

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.
×