Slice Revealer

A reveal effect where animated slices cover and uncover an image. Inspired by Zhenya Rynzhuk's transitions experiments.
SliceReveal

From our monthly sponsor: Take WordPress to a whole new level with Divi's incredibly advanced visual builder technology. Try it for free.

Today we’d like to share a simple reveal animation with you that is mainly inspired by Zhenya Rynzhuk’s transition experiments and Gil Huybrecht’s “Boardathon” Dribbble shot.

The idea is to cover and uncover an image with slices to either hide or show it. The slices can be vertical or horizontal and can come from different directions. Playing with the number of slices, delays and colors, creates a plethora of possible looks for this effect.

We are using anime.js for the animations and in the third demo we are making use of the Intersection Observer API for triggering the effects on scroll.

The demo is kindly sponsored by Be Theme: 300+ pre-built websites with a 1 click installation.

If you would like to sponsor one of our demos, find out more here.

Attention: Modern CSS properties in use, so please view in a modern browser.

SliceRevealer

We hope you enjoy this effect and find it useful!

References and Credits

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 10

Comments are closed.
  1. Demo #3 isn’t working. Can’t find variable IntersectionObserver. “const observer = new IntersectionObserver((entries)…”