Rapid Image Layers Animation

A rapid animation of multiple layers of images for intros or page transitions.
RapidLayerAnimation_featured

A while back, I came across this tweet by Twitter Marketing, which shows a video with a really nice intro animation. So I made a quick demo, trying to implement that effect. The idea is to animate some fullscreen images rapidly, like a sequence of covering layers. It’s a nice idea for an intro splash or even a page transition.

The way this can be achieved is by using the reveal trick described in the tutorial How to Create and Animate Rotated Overlays.

Basically, we have a parent wrap that is set to overflow hidden that we translate up (or down), while we translate its child in the opposite direction. It looks the same as if animating a clip-path that cuts off the image. (We could also do that, but clip-path is not a very performant thing to animate like transforms.)

When doing that animation on a set of layers, we get that really nice effect seen in the video.

For this demo, I created an initial (dummy) menu layout where you can click on the middle item to trigger the animation.

By setting a fitting animation duration and delay (I’m using GSAP here), the effect can be adjusted to look as smooth or as fast as needed. Have a look at the result:

The custom cursor animation can be found here: Animated Custom Cursor Effects

I really hope you find this little demo useful!

Credits

Tagged with:

Mary Lou

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

Stay up to date with the latest web design and development news and relevant updates from Codrops.

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.