I was inspired by Oleg Frolov's notification design and challenged myself to build it.
Oleg design -
Notification design by Oleg Frolov's
For the CSS design, I chose to take tailwind CSS.
First, we need to create a box with SVG of message notification icon.
now let's start adding some animation.
let us build the 3 dots animation.
for that, we will need a container with 3 spans for each dot.
for animation state, we will use variants.
for example, the container animation has 2 states "begin"
and "end".
each one will have its own animation attributes.
for the dots, the animation change will be from y 0 percent to 100 percent.
after defining the variation we can use it in initial and animate.
also, you can define what the transition is going to look like.
for the message text animation, we need an interval.
how can we control to start the animation on each tick?
for that, we need to import for framer useAnimation.
then we can define the animation that we want to acquire
and we just pass it into the useAnimation reference.
you can see the full code in codesandbox.
Top comments (0)