Card reveal effect, need to know how to do it

[kresogalic 0 Likes (Newbie)]

Hey guys, I really dont have an idea how to achieve this kind of effect on these cards, https://outloud.co/work

 

Can anyone give me an idea, or maybe codepen?

[PointC 14,103 Likes (Superhero)]

I think you'd probably want to use a clip-path (or mask) to reveal the images and then trigger them on scroll with ScrollTrigger.

 

[kresogalic 0 Likes (Newbie)]

Okay @PointC, got it. Few more questions, after its triggered, what do i need to reveal or use, is it a scale, or something else? I would really love to see a basic example.

[PointC 14,103 Likes (Superhero)]

There are numerous threads around the forum about using clip-paths or masks. There are also a bunch of demos on CodePen, but it appears to have imploded a couple hours ago. Actually, it looks like AWS US-WEST-2 (Oregon) went down and took CodePen with it.

 

Basically you'd set your clip-path with CSS or GSAP.

#yourTarget {
	clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%)
}

Then animate it with GSAP.

gsap.to("#yourTarget", { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" });

The above code will reveal the target horizontally from the center out to the edges. 

 

More info:

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

 

You could also use an SVG with a mask or clipPath too. 

 

Hopefully that helps. Happy tweening.

 

[PointC 14,103 Likes (Superhero)]

Okay, CodePen is back up so I made a quick demo for you. I think it should be enough to get you started.

 

See the Pen XWgdmro by PointC (@PointC) on CodePen

 

Happy tweening.

 

[kresogalic 0 Likes (Newbie)]

Thanks @PointC, got it and made it very nice.