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 is loaded. So, we are at the point of having a cool and powerful tool, but somehow yet unpractical.
We need the option to easily control the animation’s timing (delay) and to execute it only when the element is visible on the screen, as we don’t need animations that cannot be seen.
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 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 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.