[Staggered Cursor Hover Logo reveal]

Thank you! You're a magician!

[Staggered Cursor Hover Logo reveal]

So my demo doesn't demonstrate anything apart from my utter ignorance, here it is, even the mask stopped masking the logo:

See the Pen XWpoNqM by MF1 (@MF1) on CodePen

 

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

[Staggered Cursor Hover Logo reveal]

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>

 

[Staggered Cursor Hover Logo reveal]

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: 

 

 

The issue is, it makes it almost impossible for me to add a stagger effect like in this example 

 

See the Pen rNaGQYo by carolineartz (@carolineartz) on CodePen

 

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?

 

See the Pen ByxQjL by noeldelgado (@noeldelgado) on CodePen