Block Reveal Effects

Ideas for revealing content in a schematic box look as seen around the Web lately. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers some content underneath.

By Manoela Ilic in Playground on December 21, 2016

Demo Code

Free course recommendation: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Enroll now →

Today we’d like to share a couple of ideas for a kind of block reveal effect that has been used in some designs recently. The main idea is to reveal content in a schematic box look. The effect first shows a decorative block element being drawn and when it starts to decrease its size, it uncovers some content underneath.

The effect is inspired by some animations used in a couple of really nice websites (and a Dribbble shot):

There are of course many more examples out there; these are just a few that we’ve discovered lately and got inspired by.

Attention: We are using flexbox and viewport units, which might not be supported in older browsers, especially IE. For the effect itself we use 3D Transforms, so only modern browsers here.

Please note that the demos are optimized for desktop view.

Have a look at all the demos and browse the HTML files to see how the effect is implemented. All demos show some different possibilities. The last demo shows how a piece can be left uncovered to show then some content on top.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Check out our Collective and stay in the loop.