Clipping Masks

artblane · 2026-07-29T05:44:51.584+00:00

Hello, This is a beginner question, I'm wondering if there is any documentation on using clipping masks in nordcraft? Does this have to be manually written in the CSS panel using clip-path, or is there a way to do it visually? Thank you!

artblane
1 month ago
Hello,
This is a beginner question, I'm wondering if there is any documentation on using clipping masks in nordcraft? Does this have to be manually written in the CSS panel using clip-path, or is there a way to do it visually?
Thank you!
artblane
1 month ago
here is an example of the clipping mask animation I am trying to achieve from figma
I imagine the best way to set this up would be to use the hover psuedo class, and add a translate animation, but I'm not sure exactly how to achieve the mask effect
Jacob Kofoed
1 month ago
Paths and shapes are generally not supported visually in Nordcraft (yet), but you can always just write the CSS yourself using the CSS raw editor or advanced-properties in the bottom of the style-panel. Once a visual editor is added your properties should show correctly. Let me know if you need an example of this.
artblane
1 month ago
An example would be so helpful I really appreciate the clarification too :). I dug around the nordcraft templates for an example but got a bit lost.
Jacob Kofoed
1 month ago
Not sure if this is exactly what you're after, but I put this together quickly using clip-path and other maskings https://editor.nordcraft.com/projects/pinktaunwelightbedbug/branches/start/components/HomePage?ai-thread=e55a2451-252a-4740-b33d-7f09e3aedade&rightpanel=events&mode=design

See examples live here https://start-pinktaunwelightbedbug.nordcraft.site/
artblane
1 month ago
This is fantastic. Thank you for your support!!
Tod
1 month ago
Great job @artblane! Your contribution to the Nordcraft Community just made you advance to Community Level 1! 🌲

Clipping Masks

artblane

artblane

Jacob Kofoed

artblane

Jacob Kofoed

artblane

Tod