Jump to content
Search Community

Animating SVG mask content

friendlygiraffe 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

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

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

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