From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
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.
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.
References and Credits
- scrollMonitor by Stu Kabakoff
- Images from Unsplash.com
- Icons by Gregor Cresnar and Flaticon
- anime.js by Julian Garnier
- Internet ExplorerSupported from version E