Jump to content
Search Community

ClipPath/Mask in React help?

blumaa@gmail.com test
Moderator Tag

Recommended Posts

Hey! I've been trying to follow this amazing tutorial by the incredible @PointC but with my own svg and I'm having trouble getting it to work correctly with React. I've been googling but I can't find much on React and svgs and clipPaths/masks. Can anyone see what I'm doing wrong here?

 

https://codesandbox.io/s/moon-stars-clippath-mask-tests-ktqdt?file=/src/MoonMask.jsx

 

Thank you so much!

  • Like 1
Link to comment
Share on other sites

Yep - I think you just meant to animate the width and/or height of the rectangle in the mask.

 

Just my two cents, but in that article I also recommend wrapping the masked/clipped element(s) in a group and applying the mask/clip to the group. Seems to produce fewer problems for me. YMMV.

 

Happy tweening and thanks for reading MotionTricks. :)

 

  • Like 6
Link to comment
Share on other sites

Thank you to everyone who replied! I'm sorry I didn't reply sooner, as I was on holiday. Also, I apologise for the lengthy codesandbox, this one is much shorter and more readable.  And achieves the effect I wanted: https://codesandbox.io/s/sad-antonelli-hzvgy?file=/src/Moon.jsx

 

@PointC you were totally right, grouping the masked elements causes less problems.

 

@mikel your animation is super cool! But unfortunately doesn't include a mask/clipPath, nor React.

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