In UX, motion and animation can be helpful and communicative, if used with restraint. Motion is most often appropriate as a form of subtle feedback for microinteractions, rather than to induce delight or entertain users. Page Laubheimer, Nielson Norman Group • 2020
🐌 Let's talk about GOOD Animation Practices
Our brains are in-tune with the subtlety of animations.
UI elements should enhance an app.
Animations shouldn't get in the way of the functionality of the UI elements
Animations are different from Mobile to Web
The goal is to animate in a way that makes sense to our brains, by mimicing what we see in the real world.
So, if we sum up all of the above-mentioned rules and principles, the animation in the interface should reflect the movements that we know from the physical world — friction, acceleration, etc. Imitating the behavior of objects from the real world we can create a sequence that allows users to understand what to expect from the interface. Taras Skytskyi • UX Collective • 2018
Back In MY Day...
We used JQuery And we LIKED it.
The way we create USED to create animations
Flash?
JQuery?
Dreamweaver? (you know to swap a photo on hover)
With the Release of CSS3 & HTML5 web changed a lot...
CSS3: 60FPS & GPU Rendering
JavaScript Animation Libraries
🛠 Animation Tools
Here are a few tools and libraries that we use to animate web. (Sorry if your favorite isn't listed)
Especially when using Libraries & Design-to-Dev plugins, we need to be careful of how often we use them.
Should be used sparingly!
Can Effect Performance & SEO
Not always supported in all browsers
Not always UX friendly
Right Tool for the Right Problem
In many cases these are exactly what you need!
Physics-based Motion
Interactive Graphic Elements
Intro Screens / Custom Animations
Why?
because Spiderman...
Actual footage of the browser loading your animations...
🙅🏻♀️ A Bad Example
Rotating Circle Example
This shows two SVG circles that are rotated 360. One is exported using a plugin, the other is using CSS. For complex animations this plugin is perfect! In this case, we're asking the browser to use JavaScript to constantly re-render a transform.
The "Problem"
The problem here isn't that we're using javascript instead of CSS. The problem is that we're loading an entire library to rotate a circle. If all we want to do is rotate a complicated svg, we can do so without loading an entire animation library.
Don't do this:
When you can do this:
📝 A Note on Performance
It's not really a matter of JavaScript vs CSS in some cases it's about the same from a performance standpoint. (for most modern browsers)
It's all in the Timing!
With how quickly web changes, it's important to take everything with a grain of salt.
Each application is different.
CSS transitions/animations are resampling element styles in the main UI thread before each repaint event happens, which is almost the same as resampling element styles via arequestAnimationFrame() callback, also triggered before the next repaint. If both animations are made in the main UI thread, there is no difference performance-wise. MDN Web Docs, CSS & JavaScript Animation Performance • 2022
Setting a transform with a 3D characteristic (like translate3d() or matrix3d()) triggers the browser to create a GPU layer for that element. So the GPU speed boost is not just for CSS animations – JavaScript animation can benefit too! Jack Doyle • CSS Tricks • 2017
Creating 60FPS by using properties that paint at the end of the process.
“...avoid using transitions with the left/top/right/bottom properties. Those don’t create a fluid animation because they have the browser creating layouts each time, which will affect all of their children.”
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more. Tools for Web Developers • 2021
🤦🏻♀️ Wait... What's Semantic HTML?
Semantic HTML relates the structure of the content to the browser.
Visual Hierarchy is well... Visual 👀
Limited time for crawlers to gain benneficial content from your site
Text should be in a tag that relates that it is text.
Negative Scoring will Impact SEO
You can use plugins to test your accessibility. Axe Dev Tools is a good one.
You can test your semantic validation. (see link below)
When approaching which markup to use, ask yourself, "What element(s) best describe/represent the data that I'm going to populate?" For example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc. MDN Web Docs • 2021
✨ CSS Transitions & Animations
What are they?
Transitions
Change between one state and another
Using Ease or a Bezier Curve defines how the browser transitions between each state
Using Keyframes@keyframes { from {color: pink} to {color: blue} }
Reference the animation on the element you want to apply it to.animation: rotation 2s ease-in-out
So that's cool and all... now what?
Let's look at Practical Applications
Examples
Vanilla Javascript: Toggle a Class!
React + Styled Components: Toggle State!
React + Accessibility: Update ARIA Tag!
All of these based on CSS Transitions
🍦 Utilizing Javascript + CSS Transitions
Classic Vanilla Javascript
This is the typical way of using CSS transitions with Javascript. With the introduction of JavaScript Frameworks. We are able to manage state inside our application.
Query The DOM
Grab all the elements
Turn it into an array...
Loop over it
Add an Event Listener
Swap out the Class
And VOILA! You've made changes to the DOM...
Toggle a Class or Data-Attribute
So now that we have classes, we can use Javascript to “toggle” a CSS class on an HTML element. This will make the browser transition between each of the properties. .toggle(‘myClass’)
We can do this a variety of ways, a very easy one is to use Javascript to “listen” to see if an HTML element has been clicked. That will trigger our function which will then add or remove the CSS class from our element.addEventListener(‘click’, myfunction);
Instead of querying the DOM for our elements, we can update elements when there is a state change.
This example is using Styled Components / Emotion
You can use theuseState to toggle a menu open and closed.
First set up the initial state and the function... const [isOpen, setIsOpen] = useState(true);
Then pass the prop to the styles, or use them directly in the file. transform: translateX( $
{(props) => (props.isOpen ? '-100%' : '0%')}
);
You can see the pre-generated classes swap out to open the menu.
This is fine... 🤨
Let's make it even better!
What if I told you we can make this better?
...And more Accessible!
🏷 Accessibility: ARIA Tags
What are ARIA tags?
Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities. MDN Web Docs • 2022
It impacts Lighthouse scoring and the ability to easily navigate a page with a screen reader.
One Last Example! Using CSS Animations
Animations + SVGs
SVG Animation Examples
This example is using SVGs and CSS classes.
Each class contains an animation
You can add those classes to different SVG elements and groups
How this Example was built
Create a vector in your fav design program
Copy as SVG
Paste into your fav SVG Optimizer (SVGOMG)
Copy and Paste the code into a browser-based code editing platform.
Write some fun CSS Animations. 🤩
There is a lot going on in this particular example. Tons of absolute positioned items and pseudo elements. The point here was to show a few svgs animating. ☝️ It's not necessarily the most performant example.
