Card Reveal Animation

[unni]

I’m trying to accurately reproduce a reveal animation I saw in a reference video, and I’m confused about the correct technical approach.

This is not a hover animation — it’s a page-load reveal from nothing.

Visually, the element appears as a very thin vertical slice and then expands smoothly to full width. What I’m trying to understand is what is actually being animated, because it doesn’t look like a normal scale animation.
If any one know please help .


Quality Video :  https://firebasestorage.googleapis.com/v0/b/chat-app-chatify.appspot.com/o/Screen Recording 2026-01-26 at 8.45.52 AM.mov?alt=media&token=5aefb1fd-40d9-4146-81dd-a7c0f60efc86

See the Pen azZLENm?editors=1010 by unni-krishnan-the-vuer (@unni-krishnan-the-vuer) on CodePen.

[mvaneijgen]

Check out this post on the different ways of creating a mask animation with HTML/CSS and now to animate those with GSAP.

 

Hope it helps and happy tweening!