Implement MorphSvg to section reveal

[fejmek]

Hello guys! 

I'm new in GASP community and i want to create sections revealer, something like this (https://lanouvelle.agency/) 

I've created a simple reveal with help from a lot of examples and i wonder how i can implement morphsvg to change reveal effect from circle to my custom pattern.

I tried adjusting clipPath but nothing interesting... Can someone provide me with some help?

See the Pen yLrrqve by fejmek (@fejmek) on CodePen

[Rodrigo]

Hi @fejmek and welcome to the GSAP Forums!

 

Sure thing, you can definitely use MorphSVG for something like that. @mvaneijgen on of the forums superheroes created this thread where He shares a lot of knowledge on the subject:

Finally in your demo keep in mind that you're not using the correct syntax for a circular clip path:

// Wrong
timeline.from(circle, {
  clipPath: "circle(0%)",
  stagger: 1,
});

// Right
timeline.from(circle, {
  clipPath: "circle(0% at 50% 50%)",
  stagger: 1
});

Hopefully this helps.

Happy Tweening!