How to create fancy revealing animations with these simple CSS tricks

I hate clickbait articles as much as you do, this ain’t one of those though. So, let me save you a 10 minute read by just spitting out the tricks right here, right now. Define a handful of CSS animations with , set the element’s initial state (opacity:0, scale(0), etc), set the element’s CSS property to be one of the animations you just defined, set the animation’s fill-mode to , don’t always use the good old timing function but instead try some cool . Orchestrate the whole thing via . Keep it clean and classy by avoiding wide range movements. Only animate and . Always strive for 60fps. _@keyframes_ animation forwards ease cubic-bezier animation-delay _transform_ _opacity_ Easy, huh? This is obviously framework agnostic as the element’s will trigger once it’s inserted into the DOM or it’s property goes from to visible. This is the normal behavior of any framework’s router so you’ll be good to go regardless of your preferred frontend stack. animation display none Thanks for reading. Wait, seems that you want some more detail, some more meat. That’s cool, I can do that as well. So, in the next couple paragraphs I’ll explain you in more detail how to achieve the animation shown above. easily Mastering the technique Reveal dat header I’ll explain how the whole animation technique works by going step by step through the process of revealing the header of our sample site. We’ll start by first identifying the three we want to independently animate: agents We basically have 3 agents which we want to reveal at different times. I have colored in blue the time offset in which each agent should reveal itself. We want Agent 1 and Agent 3 to subtly fade in from the left. For Agent 2, it makes sense to have a cool enlarge animation from left to right just as if the line was flowing from Agent 1 to Agent 3. Let’s start by defining our core CSS animations: For we just define our element’s initial state as and moved a to the left, and our final state will render our element to full opacity and will locate it back to it’s natural position. Look how I go with just 15px of movement range. The code for is pretty much self explanatory so I really don’t have to go into details. The cool thing here is to see I’m only animating the following two CSS properties: and You might want to read more about if you’re truly committed to high performant, 60fps animations. fade-in-right hidden bit Always avoid long range movements; the whole secret lies in small, subtle motion. grow-left transform opacity . why you should avoid animating any other property Now that we defined our animations, let’s apply them to our agents. Three important things you need to keep in mind before looking at the code: Set the initial state of the element in its default CSS properties Use as the fill mode of the animation so that it preserves its final state forwards Orchestrate revealings via animation-delay Look how we defined the initial state for agents 1 and 3 as because we want them to be hidden until the fade in transition comes in. Then, we set the animation to be the previously defined with the good old function and fill-mode. As we still want Agent 3 to make its entrance to the scene later on, we set an which basically means that the animation won’t start up until 800 ms have passed since the element was placed on the DOM or was made visible via property. Really easy isn’t it? opacity: 0 fade-in-right ease forwards animation-delay: 0.8s display Now, for Agent 2 things are a bit different. The initial state is set to otherwise our element will be shown fully enlarged up until the animation kicks in. So, by setting an initial set we’re indicating how the element should render even before the animation is fired. Then we set its property so that the line enlarges from left to right, otherwise its anchor would be the center by default. We then do something similar as with agents 1 and 3 by setting , its fill mode to and making sure it makes its great revealing only after 0.4 seconds of being rendered in the DOM. The interesting bit here is the fact that we’re not using the default function as our animation timing function but instead we define a custom function. This allows us to create more interesting and visually appealing transitions than those that comes by default in the browser. Go ahead and try defining your own with . transform: scaleX(0) transform-origin: left animation: grow-left forwards ease cubic-bezier cubic-bezier this pretty fun tool Let’s see the final result: Pretty cool huh? Look how the makes a lot of sense now and how agent 1 and 3 both have the same revealing motion. Coming up with the right animation durations and animation delays is a matter of tuning by trial and error so don’t stress to much about it and just have fun playing with it. animation-delay Show me the body now It really makes no sense to go through the process of animating the rest of the content as the same technique repeats over and over again: Identify agents and revealing timings Create appropriate animations Set initial states to agents Set animations to each agent and orchestrate via proper animation delays Tune the animation by trial and error Profit Cool, but, you know, #perfmatters Yeah, perf matters, and that’s why we strive to build the whole show with just and . These are the only properties that just trigger compositing in the browser rendering process, thus avoiding computing work and therefore resulting in a jank free experience. transform opacity Let’s run a perf profiling on our revealing animation: You go ahead and look at green bar. This means that 99% of the time we hit 60fps in the whole animation. 60 frames per goddamn second (sorry, I’m just so proud of that). It can’t really be more performant. Please keep in mind that the more elements you animate (known as agents in this article), the more y your app will look like even when using the CSS golden props. This is because every animation will inevitably add a bit of GPU workload. So, try pushing to the limit the number of animated elements but always strive to hit the 60fps mark. dat jank Too much magic “I’m really not that creative to come up with fancy animations like these” Building great animations is not a matter of being technically competent but instead it takes quite a good sense of design and an innate drive to craft good UI interactions. This can be very difficult and only the most talented designers are creative enough to accomplish such feats. However, we mortals are still able to learn by imitating and taking as much inspiration as we can from true pros. For this I recommend you to frequently visit sites like A or and check ideas on cool page revealing animations. wwwards Dribbble I really hope you got rid of any fear you had regarding revealing animations with this article. It’s not rocket science as you saw but, if done well, it can surely add that factor your app is missing today. So, go ahead a create some cool animations on your site and shoot a tweet at with whatever you come up with! wow @caroso1222 Show some love by hitting that heart if you got any inspiration from this article or leave a comment.