Jump to content
Search Community

svg mask on a motion path?

geedix test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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.
×
×
  • Create New...