Jump to content
Search Community

Morph multiple polygons in an SVG

kathryn.crawford test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

  • Solution

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

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

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.
×
×
  • Create New...