MFDes Posted April 22, 2021 Share Posted April 22, 2021 (edited) 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? Hover effects.mp4Logo.svg See the Pen ByxQjL by noeldelgado (@noeldelgado) on CodePen Edited April 22, 2021 by MFDes codepen didn't show up correclty Link to comment Share on other sites More sharing options...
OSUblake Posted April 22, 2021 Share Posted April 22, 2021 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. Link to comment Share on other sites More sharing options...
MFDes Posted April 22, 2021 Author Share Posted April 22, 2021 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> Link to comment Share on other sites More sharing options...
OSUblake Posted April 22, 2021 Share Posted April 22, 2021 Can you put that in a demo? I've never used mask like that because support is meh. Usually go full-on svg. Link to comment Share on other sites More sharing options...
MFDes Posted April 22, 2021 Author Share Posted April 22, 2021 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 Link to comment Share on other sites More sharing options...
Solution OSUblake Posted April 23, 2021 Solution Share Posted April 23, 2021 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/ 3 Link to comment Share on other sites More sharing options...
MFDes Posted April 23, 2021 Author Share Posted April 23, 2021 Thank you! You're a magician! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now