animating masked SVG

[celli]

I am experimenting with masking with SVG+GSAP, and I am looking for the simplest cross-browser solution.

 

Here is the simplest solution I can see in the codePen, and it works in Safari and Chrome. In FireFox I see the mask, but it looks like GSAP doesn't animate it, and in IE9-10 I don't see the clip-path work, although it looks like IE 8+ supports the clip-path.

 

Using this as a starter, does anyone know of a way to tweak the masking to work in IE and FF ?

See the Pen LpEqJg by celli (@celli) on CodePen

[Diaco]

Hi celli 

 

pls check this out : http://greensock.com/forums/topic/12062-masking-with-clippath-and-svg/?p=49528

[celli]

Thanks Diaco, Yes I saw that post before ...I added the "attr" to my codePen now... but it seems to stop working, am I doing something wrong ?

[celli]

I'm still trying to find the best way to animate a mask, and I want to use the power of GSAP--so I found that snap SVG does a great job of allowing cross-browser masking and morphing of SVG shapes. I am mixing snap and GSAP, and I can get the ID of a snap created element, and control all of them with GSAP, which seems to work cross-browser--all except when I try and animate the MASK!

 

If you see this new codePen, I can animate all elements with GSAP, except for the mask which is "tl3" at the bottom of the JS code... any way to get the mask to animate with GSAP ?

 

See the Pen gapLjN by celli (@celli) on CodePen

[Rodrigo]

Hi,

 

As far as I remember, and I'm far from being a SVG expert, Snap does expose an API for the elements created with it, that can be accessed and Tweened with GSAP without too much problems.

 

Also Anthony created a Snap plugin based on the original RaphaelJS plugin, since Snap and Raphael were created by the same guy but the difference is browser support:

 

https://github.com/anthonygreco/GSAPSnapPlugin

 

Take a look at it and let us know how it works.

[celli]

Thanks Rodrigo, I am now using the GSAPSnapPlugin, but I don't see it working. I can find all elements, and animate them all with GSAP, all except for my MASK! I am using the snapPlugin syntax like this, just replacing 'raphael' for 'snap' (it's the last line of code in the codePen: 

See the Pen gapLjN by celli (@celli) on CodePen

TweenLite.to("#maskee", 3, {snap:{x:100, y:100}, ease:Power1.easeInOut});

[Rodrigo]

Hi Celli,

 

The codepen link is broken

 

What you could do is create a console call to see what is being exposed in the mask and how it can be animated using GSAP. This is from Snap's docs:

 

http://snapsvg.io/docs/#Paper.mask

 

As I see it does exposes an x and y, so perhaps you might not need the snap:{} config object and just reference the mask directly:

TweenLite.to(myMask, 1, {x:300, y:300});

Sorry but I'm very short of free time now so I can't set up a working sample now. Hopefully this helps somehow.

[celli]

Thanks Rodrigo, I think codePen was down! I updated the codePen--and I exposed the ID of the mask and I can animate it with SNAP but not GSAP, not sure why though. I put some comments in the JS to show snap animating the same element (mask) that I am trying to animate with GSAP. I'm going around in circles I've tried so many things, but I can't seem to target the mask. 

See the Pen gapLjN by celli (@celli) on CodePen

 

I love GSAP so much, I just really wish there was a GSAP mask plugin!

[OSUblake]

Your CodePen links are dead, but you don't need a plugin. Have you tried animating what's inside the mask and not the mask itself?

TweenLite.to("#svgmask > image", 1, { x: 100 });

[celli]

it works! I had something wrong with my codePen all along. We can create SVG objects with SNAP (which makes the clip-path work cross-browser) and then animate the mask and any other elements created with GSAP. 

See the Pen gapLjN by celli (@celli) on CodePen

[Diaco]

Hi celli 

 

i'm really Curious ! , Why you keep posting dead links !?...  pls check your links before/after posting in forums .

 

thanks in advance .

[celli]

sorry! somehow the codePen must have had a problem, I just realized you can't see it unless I was actually logged into codePen--when I logged out it was missing. I copied everything over to a new codePen, hopefully we can all see it now... 

See the Pen YyyGEp by celli (@celli) on CodePen