Jump to content
Search Community

Animating icons with groups

gerjogreenwald test
Moderator Tag

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

Hi There,

I'm new to Greensock and i have been playing a little with the plugin, especially the MorphSVG plugin. For my current project i'm using Greensock to animate some elements on the site but i'm also trying to achieve animated icons. Now i'm been searching to create a simple tween between 2 groups <g> but i read in old topics that it's just possible to do a one on one path morph. As i already include this library, and try to avoid including more, i would like to use MorphSVG for this without recreating available SVG icons with a seperated animation. Am i overlooking something, is there a workaround for this or should i look at some other library?

 

With kind regards,

Gerjo

Link to comment
Share on other sites

Hi and welcome.

 

Like Jonathan said, without seeing your SVG in an editable environment like CodePen it is difficult to suggest a workflow or solution for you

 

Now i'm been searching to create a simple tween between 2 groups <g> but i read in old topics that it's just possible to do a one on one path morph.

 

That is still true, you can not morph one <g> into another <g>, only one <path> into another <path>. There is a lot you can do with MorphSVG and compound paths (paths with multiple segments).

 

http://codepen.io/roblevin/pen/dYembB?editors=0010

  • Like 2
Link to comment
Share on other sites

Hi gerjogreenwald  :)

 

Welcome.

 

Yep - I agree with Jonathan and Carl -  a CodePen would really help answer your questions.

 

That being said, in addition to Carl's great advice and link about compound paths you do have another option. If you've got a lot of paths in each group and want to morph each one of them you can loop through and make that happen. As long as you sequentially number your start and end paths, you can do something like this:

for (i=0; i<5; i++) {
TweenMax.to("#start"+i, 1, {
  morphSVG:"#end"+i, 
  ease:Power2.easeInOut});
}

Here's a simple CodePen to show you how that could work:

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

 

Hopefully that helps a bit.

 

Happy morphing and welcome aboard.

:)

  • Like 2
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...