Jump to content


Animating SVG mask content

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, 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

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

Sweet! Thanks, Sahil.

Link to comment
Share on other sites

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.



  • Like 4
Link to comment
Share on other sites

  • 1 year later...

Nevermind, thank you for the answer!

Edited by Wayrse
Figured out my question - don't know how to remove post
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.