Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animating SVG mask content

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

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.