Jump to content


Card reveal effect, need to know how to do it

Recommended Posts

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.


  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:



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


Hopefully that helps. Happy tweening.



  • Like 3
Link to comment
Share on other sites

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.



  • Like 4
  • Haha 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.