Slice Revealer

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

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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

We hope you enjoy this effect and find it useful!

References and Credits

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.

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

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 10

Comments are closed.
  1. Wow! Nice one 🙂

    Is it possible to add text on top with the images on the background?

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