This animated block gives nice looking design ideas. In the meantime, it shows how amazing the shape dividers are. There is a wave-like shape at the top of the slider, connecting it with the white section above. This shape highlights the oceanic theme of the whole slider. Below the top shape there is a heading layer with a nice split text animation.
There are four counter layers after the heading, creating some extra movement on the slide. The block’s last element is a bottom shape divider. It also looks like a wave and moves continuously, just like the waves of a real ocean.
The four counter layers are in 4 columns, and above the counters you can see cool icons. You can choose other icons from 4 icon library, and you can change the color and the size, you can also put a link on it, or use a layer animation.
How to create counter layer?
1. Select the layer from the Layer list
2. Set up the layer
You can set a start value, where the count will start, and the value where the counter should end. You can set a Pre and Post label which will be before and after the layer. You can also set the title of the whole progress bar, which can be before and after the counter. Finally, add the animation duration and the delay, and play it with the timeline.
3. Design it
If you have set the counter layer, you can design it similarly to other layers in the Layer window → Design tab. You can design the font of the Counter and the Label separately.
Other cool feature for that example is the parallax effect in the background. This effect gives the illusion of depth when the user scrolls on the page. It creates a great user experience, and calls the visitors attention.
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 13, 2021. For the latest result analyze now!
Related Post: Everything You Need to Know about the Parallax Effect
Related Post: How to Create a Cool Text Animation