Sean_has_started_coding Posted May 2 Share Posted May 2 Hello all I'm unable to get a clipping path to work correctly with a simple animation in Greenock. Being a little dim I guess but I can't see what I have done wrong. Masking an image is simple to me but not a clipping mask. Find attached a code pen with the ship animating into the circle. Circle has been placed within the Defs tag. Can someone please assist? Any help will be greatly appreciated. Thanks as ever. See the Pen bGmoLOR by HappyGooner (@HappyGooner) on CodePen Link to comment Share on other sites More sharing options...
Solution PointC Posted May 2 Solution Share Posted May 2 Couple of small things: You set your clip-path in your CSS to #myBoatMask, but it had no name in your HTML. You'll want to animate a child group of the group that is actually clipped. Make those changes and you should be good to go. See the Pen 1e25b266f580040a4f6a7cdca25f38f0 by PointC (@PointC) on CodePen Happy tweening. 2 Link to comment Share on other sites More sharing options...
Sean_has_started_coding Posted May 2 Author Share Posted May 2 1 hour ago, PointC said: Couple of small things: You set your clip-path in your CSS to #myBoatMask, but it had no name in your HTML. You'll want to animate a child group of the group that is actually clipped. Make those changes and you should be good to go. Happy tweening. You're a star, many thanks Craig. Makes perfect sense to animate a child group of the group that is clipped Really appreciate you taking the time to fix that. Link to comment Share on other sites More sharing options...
ClarenceHilton Posted May 16 Share Posted May 16 On 5/2/2023 at 7:24 PM, PointC said: Couple of small things: You set your clip-path in your CSS to #myBoatMask, but it had no name in your HTML. You'll want to animate a child group of the group that is actually clipped. Make those changes and you should be good to go. Happy tweening. Is there any video link where I can see the clipping mask? Link to comment Share on other sites More sharing options...
PointC Posted May 16 Share Posted May 16 Sorry - what do you mean a video? Like a tutorial? Link to comment Share on other sites More sharing options...
ClarenceHilton Posted May 17 Share Posted May 17 Yes, tutorial video. Link to comment Share on other sites More sharing options...
PointC Posted May 17 Share Posted May 17 No - there isn't a tutorial video, but searching YouTube should give you plenty of options. https://www.youtube.com/results?search_query=svg+clip-path 1 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