geedix Posted November 1, 2021 Share Posted November 1, 2021 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? . thanks See the Pen BadmLza by geedix (@geedix) on CodePen 1 Link to comment Share on other sites More sharing options...
akapowl Posted November 1, 2021 Share Posted November 1, 2021 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 4 Link to comment Share on other sites More sharing options...
Solution PointC Posted November 2, 2021 Solution Share Posted November 2, 2021 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 5 Link to comment Share on other sites More sharing options...
geedix Posted November 2, 2021 Author Share Posted November 2, 2021 Ah, thank you akapowl and Craig. True, the group tag version doesn't do it on Firefox. Proxy it shall be! 2 Link to comment Share on other sites More sharing options...
geedix Posted November 3, 2021 Author Share Posted November 3, 2021 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 More sharing options...
Cassie Posted November 3, 2021 Share Posted November 3, 2021 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 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now