Animating 'pass through' svg effect

[Olav]

Hi all,

 

I'm trying to implement the following effect:

https://imgur.com/26yCYUZ

 

I've found it on a few website's such as:

https://martingarrix.com

https://tilt.digital

https://lanouvelle.agency

 

Included is a minimal demo on how the html/css/scrolltrigger should behave, although I have no idea on how to actually implement the svg / clip path effect. Does anyone have an idea in the right direction, or another codepen using the same concept? Thanks in advance!

See the Pen jOdNeQM by olavgit (@olavgit) on CodePen

[Rodrigo]

Hi,

 

The way to go in these cases is animating the clip-path property. You can check the cross or polygon types:

https://bennettfeely.com/clippy/

 

Here are a couple of examples for implementing such animations with ScrollTrigger:

See the Pen oNJRjNL by GreenSock (@GreenSock) on CodePen

 

See the Pen eYbqrLZ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Olav]

Hi @Rodrigo,

 

Thanks for your examples! I can see this working with 'simple' shapes, but what if I need to use a logo or another svg which would be to complex to recreate in the css clip path property. Can we also handle this using the actual svg clipPath? And do you maybe have an example for that?

[Cassie]

From a GSAP perspective it's all the same really!

See the Pen RwRORqB by cassie-codes (@cassie-codes) on CodePen

 

I'd suggest taking a look at documentation on masking and clip paths if that's the bit you're a little confused by. Might be worth having a little play around without animation first - just try masking or clipping different things -

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask

[Olav]

Thanks for the lead @Cassie, I ended up with this:

 

See the Pen oNmNjRg by olavgit (@olavgit) on CodePen

 

Achieves the same effect, but in a slightly hacky way I guess. Do you think this could be optimised?

[Rodrigo]

Hi,

 

Looks good to me. Honestly many times we trap ourselves into convoluted code trying to optimizing it or making it look better. Sometimes less is more and simpler is better 😃
 

Happy Tweening!

[Olav]

I couldn't help but try to figure out another way to make this work, and I'm nearly there. I just can't get my hands on the positioning of an svg clipPath, which isn't gsap related, but maybe someone here has the missing answer to my problem. I have created this very very minimal demo:
 

See the Pen jOdbaZP by olavgit (@olavgit) on CodePen

 

All I want is for my custom clipPath to be centered on the element it is clipping, just like the behaviour of the red circle. Is this possible?

[Rodrigo]

Hi,

 

Indeed that is not really a GSAP related questions and we try to keep these forums focused on GSAP questions.

 

Maybe this thread can help:

 

Good luck with your project.

Happy Tweening!

[mvaneijgen]

I think your SVG needs to be 1px by 1px (really weird I know) check this blog post https://davesmyth.com/clip-path-scaling