Animating SVG mask content

[friendlygiraffe]

Hi, I'm having to use an SVG mask (so it works on Explorer)

 

I wondered how I would animate the containing image, without moving the mask?

 

See demo

See the Pen gvVEzr by friendlygiraffe (@friendlygiraffe) on CodePen.

[Carl]

Maybe try applying your mask to a group <g> and put your <image> in the <g>.

Then animate the position of the image.

 

For cases like this I would search CodePen for awhile and try to find an SVG mask demo that works in IE and then try to animate it with TweenMax.

I'm really not up to speed on how all the different versions of IE handle masks and that kind of stuff.

[Sahil]

Ya what @Carl suggested works in IE9, also you were using really old version of TweenMax.

 

See the Pen JLPPNy?editors=1010 by Sahil89 (@Sahil89) on CodePen.

 

[Carl]

Sweet! Thanks, Sahil.

[Acccent]

Always a good idea to check this pinned thread with lots of great tips about working with SVG

[PointC]

For my two cent addition, I'd recommend groups for all your masked and clip-path elements. Even if it's just one element, creating a group and applying the mask or clip-path to the group is a better approach. IMHO

 

Happy tweening.

 

[friendlygiraffe]

On 3/7/2018 at 2:29 PM, Sahil said:

Ya what @Carl suggested works in IE9, also you were using really old version of TweenMax.

 

See the Pen JLPPNy?editors=1010 by Sahil89 (@Sahil89) on CodePen.

 

 

Thanks all. This worked for me

 

[Wayrse]

Nevermind, thank you for the answer!

Edited November 30, 2019 by Wayrse
Figured out my question - don't know how to remove post