Rapid Image Layers Animation

Rapid Image Layers Animation

tympanus.net tympanus.net3 months ago in #Resources Love51

A rapid animation of multiple layers of images for intros or page transitions. From our sponsor: Don’t spend all day sending messages. Automatically reach out to fans based on how they behave. 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 Images by Minh Ngoc Tagged with: animation fullscreen gsap image page transition 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 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. Codrops uses cookies for its advertisement solutions and for analytics. We hope you’re ok with this, but you can opt-out if you wish. Read our Privacy Policy and Cookie Policy. OK  » Read More

Like to keep reading?

This article first appeared on tympanus.net. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply