Staggered Cursor Hover Logo reveal

[MFDes]

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

Edited April 22, 2021 by MFDes
codepen didn't show up correclty

[OSUblake]

5 hours ago, MFDes said:

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

 

How so? Just animate 3 different shapes. A stagger is just a delay, or you can use different speeds, i.e. durations.

[MFDes]

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>

 

[OSUblake]

Can you put that in a demo? I've never used mask like that because support is meh. Usually go full-on svg.

 

 

[MFDes]

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

[OSUblake]

Like I said, mask support is meh for HTML elements. You need to go all SVG.

 

See the Pen 29cfa0e0a2a25b403dcd15c365096996 by osublake (@osublake) on CodePen

 

If you're new to SVG animations, @PointC has some fantastic tutorials...

https://www.motiontricks.com/

 

 

[MFDes]

Thank you! You're a magician!