Jump to content

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

svg mask on a motion path?

Go to solution Solved by PointC,

Recommended Posts

I am able to rotate a mask while it affects an object on a motion path:

See the Pen WNEXwNE by geedix (@geedix) on CodePen


And I can tween a mask without a motion path, but I haven't been able to tween a mask on its own motion path. Possible?  . 


See the Pen BadmLza by geedix (@geedix) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey @geedix


I took a quick look at this thread here (found via google) where the element masking in the example is wrapped in a <g> group tag.



Took that same approach for the markup of your mask and now it's working - can't explain why though I'm afraid.


See the Pen 5e7d87b2fe4fa1d8641a897622fbdc13 by akapowl (@akapowl) on CodePen

  • Like 4
Link to comment
Share on other sites

  • Solution

I don't think that grouping trick is gonna work in Firefox. I'd probably use the plain circle as a proxy like this. YMMV. :)


See the Pen aa3b8fdadd3578ddd7844143265a4b92 by PointC (@PointC) on CodePen


  • Like 5
Link to comment
Share on other sites

Ah, thank you akapowl and Craig. True, the group tag version doesn't do it on Firefox. Proxy it shall be! 

  • Like 2
Link to comment
Share on other sites

I'm still on this motionPath mask project, but trying to have the masked item move, too.

First I tried having two motion paths. So the mask (with circle) and the image were on separate motion paths. The mask wouldn't stay in sync, even with the onUpdate method that Craig used to solve my problem with masking an image that's sitting still.

Here's the codepen, based on the above: 

See the Pen WNEXYJW by geedix (@geedix) on CodePen


I have also tried doing something similar without motion paths, and I'm still having problems with the mask not taking effect, or being out of register.

I tried looking at MotionPathPlugin.convertCoordinates , but it doesn't seem necessary here, since they're both root level elements, right? 

At this point I'm thinking this may be too much for SVG to handle, and maybe I'll try an AE/Lottie approach. But then again maybe I'm missing an easy solution. 


Link to comment
Share on other sites

Heya @geedix,

So - you're animating the circle within the mask correctly - but you're also animating the group you've applied the mask too. That's why the mask is moving out of synch.

If you want to animate the photo too you'll need to animate the image within the group that's being masked to avoid compounding the movement.

See the Pen 6025ae5a92daf0dd3edb86fe603e9f23?editors=0010 by cassie-codes (@cassie-codes) on CodePen

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