Jump to content
Search Community

Card reveal effect, need to know how to do it

kresogalic test
Moderator Tag

Recommended Posts

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

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