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
Rapid Image Layers Animation was written by Mary Lou and published on Codrops.