From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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.
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
- Images by Unsplash.com
- anime.js by Julian Garnier
- imagesLoaded by Dave DeSandro
Awesome! It’s possible to autoplay?? How??
Awesome animation!!! I want to have autoplay too? Can somebody guide ?
Wow! Nice one 🙂
Is it possible to add text on top with the images on the background?
Demo 3 seems to have exactly what you’re talking about!
https://tympanus.net/Development/SliceRevealer/index3.html
Demo #3 isn’t working. Can’t find variable IntersectionObserver. “const observer = new IntersectionObserver((entries)…”
What browser are you using? Right now intersectionObserver has pretty inconsistent support:
https://caniuse.com/#search=intersection
Ah…Safari. Sorry. Didn’t realize that last one used that.
Please can you tell me how to add source code to wordpress????
Thank you for your help. Great work.
God Bless You!
I am a big fan of your items..all of the items are awesome…Thanks sir