Animations are the best way to bring life to our websites: they help us tell stories and communicate what is happening at that moment. They naturally catch our attention so it’s important to learn how and when to apply them. If we use animations in the right way, we can improve our website’s usability, if we abuse them we can ruin the user experience.
In this article we’ll show an example of interactive animations, the ones that appear right after the users take an action and can help them notice the results.
A good case for using SVG interactions are form validations. We can let the user know what is happening at the time they interact with the inputs. This is an example that you can find at the bottom of this website.
In this example we need both inputs to be filled. As soon as the user types any letter the green check icon will confirm that the input is valid. This is a small interaction that we can achieve by adding the
required HTML5 attribute to our text
textarea like this:
In CSS we use the selector + pseudo-class:
textarea:valid with a SVG in the background that will show only when the element is valid:
When adding an inline SVG in CSS is important to use the namespace
xmlns=”http://www.w3.org/2000/svg" or the image won’t be displayed.
The transition of the background will make the SVG move from its initial position to 98% to the right, as defined in the background shorthand in CSS.