How I coded the search reveal animation for the web
I’ve always been interested in animations, and I never fail to notice the small details that distinguish them from each other. I actually really appreciate the effort the designers put into them, that’s why I’ve always enjoyed the Material Design animations on my Android phone — and it’s no secret to anyone.
Recently, a really beautiful animation caught my eye while using apps like Play Store and Whatsapp after tapping the search icon: the circular reveal animation.
Knowing my passion for coding and my interest in design, I couldn’t resist the temptation to recreate that animation for the web.
Umm.. what exactly are you talking about?
Yes. The circular reveal animation.
I’m sure you’ve seen it before. It’s used in many apps, and it’s quite unique & recognizable. It simply consists of a circle expanding and transforming into a view.
You can see it in action on the left. Here, it’s used in the Play Store app to reveal a floating search box.
And how are you going to code it?
Wanting to do things the right way, I looked for documentation on the Material Design Guidelines website, but I couldn’t find any guidelines regarding this. And since there was nothing mentioning it, I resorted to taking a look at how Google brings the search into view in the Play Store app. After taking a closer look and slowing it down to catch the smallest details, I had a clearer idea on how it worked.
Now, I had the tackle the issue of coding it, and the best way to do it wasn’t very obvious at first.
I sat down and I went through the many different ways this could be pulled off with CSS and Javascript. Different ideas came to mind and I had to test them to see which one was the most efficient in terms of code and performance.
Alright, let’s see how you did it!
1st approach: Scale
The first thing that came to mind was the basic CSS property scale. At first, I wanted to create a small circle and to scale it from 1 to 300, filling the whole toolbar.
However, this technique had several issues:
- The circle looked too blurry while animating
- On mobile, the circle doesn’t grow from the same point as on PC
I thought a bit more and came up with a slightly better idea, still using scale, but this time, the scaling was from 0.003 to 1.
Now the circle wasn’t blurry anymore. Yayyy!
On the other hand though, a very important issue still needed to be addressed: the content was scaling with the circle too.
I had to find something else that could do the job and hopefully perfect it.
2nd approach: Clip-path
After the scale CSS property turned out to be a failure, I searched for different ways to animate shapes with CSS. That’s when I came across clip-path.
Spoiler alert: it turned out great! Using clip-path with a bit of Javascript (and a lot of adjustments), I got it to the point where I was happy about it!
See it in action on my website!
Some smaller additions
At this point, I was very happy with what I had achieved, but I wasn’t fully satisfied.
You might say: “Well, it works quite well!”.
I agree. It was quite satisfying at this point, but not perfect yet. Whatsapp does a better job by retracting the tab bar. So I decided I was going to do the same.
See it in action at toufic.000webhostapp.com!
Wrapping up
So that’s gonna be it for my first story on Medium. I really hope you enjoyed reading it as much as I did writing it!
