Jump to content
Search Community

SVG animation

Sean_has_started_coding test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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

  • Solution

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.

:)

 

 

  • Like 2
Link to comment
Share on other sites

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

  • 2 weeks later...

  

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

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