MFDes

Thank you! You're a magician!

So my demo doesn't demonstrate anything apart from my utter ignorance, here it is, even the mask stopped masking the logo: https://codepen.io/MF1/pen/XWpoNqM Perhaps using a mask is an overkill in this case and there's something way simpler. I've tried the <clipPath> within the <svg> tag but to no avail

That sounds like a really good idea. In fact I'm hoping to be able to add a stagger to a mask-position by manipulating the var(--clip-position) with GreenSock. All I need is to get one layer of the logo right and adjust from there. Here's a snippet of the CSS I'm using for this project. The issue is, I can't figure out how to get the position of the mask from my cursor and add a GSAP stagger to it <style> :root { --clip-position: center; } .clipped { object-fit: cover; display: block; width: 100%; height: 100vh; -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M60.8,30.4c0,8.4-3.4,16-8.9,21.5s-13.1,8.9-21.5,8.9C13.6,60.8,0,47.2,0,30.4S13.6,0,30.4,0C47,0,60.8,13.4,60.8,30.4z"/></svg>' ) no-repeat; -webkit-mask-size:200px 200px; -webkit-mask-position:var(--clip-position); mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M60.8,30.4c0,8.4-3.4,16-8.9,21.5s-13.1,8.9-21.5,8.9C13.6,60.8,0,47.2,0,30.4S13.6,0,30.4,0C47,0,60.8,13.4,60.8,30.4z"/></svg>' ) no-repeat; mask-size:200px 200px; mask-position:var(--clip-position); </style>

Hi Everyone, I'm looking to create a logo reveal effect on my site using three circles working as a cursor with a stagger added to it. The only way I can think of achieving this is by using a clipPath within the SVG code which position would be manipulated through JS like in this Codepen: https://codepen.io/noeldelgado/pen/ByxQjL The issue is, it makes it almost impossible for me to add a stagger effect like in this example https://codepen.io/carolineartz/pen/rNaGQYo Now, the second example uses blending modes to get a clip path effect which makes it impossible to use on any page that is not white. Is it possible to use GSAP to achieve this effect? Hover effects.mp4Logo.svg