There are great ideas, and examples on the internet for CSS animations, but not so many explain how to make loading page elements appear smoothly and not before they are visible/scrolled.
It’s amazing how the following simple tricks can turn a page from boring and dull to a champion.
The goal is to create a way to implement or test CSS Animations on pages by people that are not developers, such as UX designers and even regular users.
Adding the Animate.css gives you a way to trigger animations with adding two HTML classes without having CSS knowledge – “animated” and “animation name.” The first class triggers the animation and the second - the animation type. The unfortunate issue here is that they all start as soon as the page finish loading. So, we are at the point of having a great and powerful tool, but somehow yet unpractical.
We need the option to control the animation's timing (delay) easily and to execute it only when the element is visible on the screen.
How to control animations and delays easily
<p class=”fadeIn animated”>
We will add:
<p nvs-animation-delay="250" nvs-animation-type="fadeIn">
Now, with these custom attributes, we have the needed control, and anyone with basic HTML knowledge can use and be creative.
How to use custom attributes for configuration
The LESS code
As a result, I decided to create an array of time steps @animation-ms. First, in every 50ms and then in 100ms until 2000ms (2 seconds). The idea is that the designer will create animations with a delay in some patterns and won’t need countless variations, but still be flexible if there is a need.
After that, we need to add styles to all nvs-animation-delay attributes. In our case, we use a loop to iterate through the @animation-ms array. If you've never used CSS, pre-processor, this can be a little bit overwhelming, but if you convert to CSS, you will see that we are doing it just to minimize redundancy and it’s not black magic.
To create the actual CSS, we need to initialize the loop (line 18).
The styles below hide the elements before the beginning of the animation and disable the animation for small devices.
The function nvsAddAnimation() adds the needed classes, while nvsOnScreen() checks if the element is on the screen.
Adding animations will breathe life into every page. Everything can be changed or extend to fit your needs. Just make sure not to overuse it, because it is considered bad practice.