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
Demo Code

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.

blockrevealers_01

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.

revealer

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? Subscribe and get our Collective newsletter twice a tweek.

References and Credits

Browser Support:
  • ChromeSupported
  • FirefoxSupported
  • Internet ExplorerSupported from version E
  • SafariSupported
  • OperaSupported

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Creating an Infinite Circular Gallery using WebGL with OGL and GLSL Shaders

Rotating Twisted 3D Typography with Three.js and Shaders

Building an Interactive Sparkline Graph with D3

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 32

Comments are closed.

  3. Nice, only noticed it doesn’t show the blocks on native mobile android stock browser (not using chrome because it sucks battery).

    • Well, I think that her code is more reusable.
      For example it can adapt to any components by copying and pasting any html content and applies the effect. same thing for the effect options. each animation can be customized easily.
      IMHO It would be a bit messy in full css.

      @locotay nice demo ! 😀

  8. Love your stuff. I’m getting a lot of traffic to the scrollmonitor from this post.

    Check out scrollmonitor-parallax, it would let you make the box effects come in and out at the speed of scrolling. The docs aren’t great yet, but there should be enough info there to get it working.

  9. I usually never comment on these, but this is so good! I’ve been waiting for that one, thank you so much!
    Keep up the good work Mary Lou, I’m a designer but over the years you gave me the motivation and assets to learn code.
    <3

  10. Manoela: Thanks for the nice X-mas gift and all your beautiful contributions through out the year(s). Hope you get more and more inspirations in the years to come.

    I made this thing work. I could only make the on-load, modal and split screen make it work. Even for those the content loads first and is visible then those two blobs load and then they run away.

  11. Nice nice nice 🙂 How would you do this if you have set a background image in CSS. Or a background color..?

  18. AWESOME WORK. Has anyone successfully made the menu sticky?
    I’ve tried position: fixed; on almost everything, and either the icon becomes unclickable or it simply doesn’t work.

  21. Wonderful work!
    I was just wondering if it might be possible to use the effects on the overview + modal + menu + split layout on the same page?
    I tried putting the java scripts one after the other on the same page. That doesn’t work.
    Any help would be greatly appreciated.

    Best regards!

    Nedim

  24. Hi, it’s a great effect. Well done.

    I try to make a loop to display this animation on all titles and images in my page. Anybody here can help me, please ?

  25. Iv’e tried the script. It works perfectly in Chrome and Firefox. But buggy in IE 11 and Edge

  26. Great script, thank you! But why does the menu in the demo work in IE/Edge, but the downloadable source not? Can’t recognize any changes at the script…

  28. Hi Mary Lou,

    Love this!

    Although I’m having trouble making the block revealer form actually submit. Any chance you could provide an example code for this?