Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kresogalic

Card reveal effect, need to know how to do it

Recommended Posts

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?

Link to comment
Share on other sites

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:

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.

:)

 

  • 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.
×