the-role-of-animation-and-motion-in-ux

Summary: Animation in UX must be unobtrusive, brief, and subtle. Use it for feedback, state-change and navigation metaphors, and to enhance signifiers.

Topics:

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. In this article, we explore the purposes of useful, unobtrusive feedback animation. In a second (forthcoming) article, we will discuss the details in timing and movement to make these animations appear smooth and natural.

The big advantage (and also drawback) of UI motion is that it attracts user attention. Our peripheral vision (specifically, through the rod-shaped photoreceptors in the human retina) is responsible for detecting motion.  Evolutionarily, the fact that we can detect a movement outside the center of our field of vision is, of course, an advantage: we can discern danger and protect ourselves. But that means that we are sensitive and prone to be distracted by any type of motion (meaningful or not). That’s why motion in user interfaces can easily become annoying: it’s hard to stop attending to it, and, if irrelevant to the task at hand, it can substantially degrade the user experience (as any web user who has encountered a moving advertisement can attest).

Although animations can be useful and can build user expectations about the UI, they should be used with a light touch — primarily as a tool for providing users with easily noticeable, smooth feedback.

Purpose of UI Animations

When animation is used in a subtle way, it can help users build mental models about how the system works and how they can interact with it.  Animations are less critical for user experience when they are simply time-filling visual stimulations during moments of transition (in fact, it’s these down-time animations that often frustrate participants in usability testing).  Instead of using animations to provide surface-level delight (that quickly sours), animations can be leveraged for usability: as clues about what is currently happening with the system, as signifiers for how UI elements will behave, and as easily understandable spatial metaphors for the user’s location in the information space.

Motion for Feedback

Animations are often helpful as a form of noticeable feedback that an action has been recognized by the system.  A ubiquitous example is the animation of a navigation menu sliding over the page when a hamburger icon is tapped.  Because our visual systems are so attuned to motion, a short animation can ensure that users see the feedback.

American Museum of Natural History: When clicking the Exhibitions menu icon in the middle of the page, a menu panel slides over from the left side on top of the page’s content, rather than appearing suddenly like a new page.
Epicurious for iPhone: A shopping-list feature shows a subtle animated feedback when the user adds a new item to the list: upon hitting the Done button on the keyboard, the word that was just typed (Coffee, in this case) instantly becomes light gray, and then quickly changes to black to show that it has been accepted. At the same time, the input field both fades in and slides down below, signaling that it is waiting for new input.

Sometimes, static visual feedback is ignored due to change blindness. For example, people may not notice the shopping-cart–badge update after clicking the Add to cart button in the Cuisinart example below. An animation increases the chance of noticing that feedback. (Another alternative would be to make the static feedback more prominent — e.g., through a dialog box or using a bigger badge. Both solutions would likely be more intrusive than a simple animation.)

An ecommerce product page that features no animated feedback when adding an item to the cart
Cuisinart.com: After the user clicks Add to cart, the cart badge simply updates, with no animation. Because the badge is small and far away from the Add to cart button (which is likely where the user is looking), it’s easy to miss this change. The result could be that the user adds the same product to the cart multiple times.

And animations can also be used as a form of feedback before the user commits to an action, such as previewing the new location of an item when using drag-and-drop to reorder a list.

Airtable: When drag-and-drop is used to reorder columns in a table, a subtle animation gives a preview of the new order before the user lets go and commits to the action.

Motion to Communicate State Change

Motion can be used to indicate that the interface switched to a different state — for example, because of a mode change. Modes are often a difficult concept to communicate to users, but animation can help in two ways: (1) by making the mode change noticeable; and (2) by providing a conceptual metaphor of the mode transition. For example, morphing a pencil icon into a disk after it was clicked on signals the transition from Edit to Save mode more clearly than swapping one icon out for the other instantly.

Material Design: A pencil icon that transforms into a icon helps to communicate the difference between the Edit mode and the Add new mode.

In addition to showing a transition between modes or views of data, animations are also helpful for communicating state changes that are not triggered by users’ actions. For example, loading indicators show that the system is not yet ready to accept input.  One form of this is a “skeleton screen” (a placeholder UI that looks like a wireframe of the loading page, with no content) that is animated by a light glare moving across it.  

Hipmunk: While loading flight-search results, Hipmunk offers several animated cues. First, there is an animated chipmunk pretending to fly. (While cute, the chipmunk is not essential for feedback, but is helpful to establish the brand tone.) However, at the same time, other, more-communicative animations occur: the number of flight results climbs steadily from 0 to 754, indicating that the system is performing multiple federated searches concurrently. Also, a placeholder shows where content will appear as flight results load.  A progress bar, along with two animated ellipses, indicates that results are still loading.  Finally, as new results are loaded and the relevance order changes, a subtle animation shows new results appearing within the list and is meant to communicate that the order of the search results is changing dynamically.  However, the number of simultaneous animations is overwhelming: the power of any of these animations to pull the user’s attention is diminished by competition from all the others.

Motion for Spatial Metaphors and Navigation

The structure of a complex information space is often challenging to communicate to users without taxing their cognitive resources or taking up too much screen space. Scanning through navigation menus, tree diagrams, or even breadcrumbs to figure out where one is in the information hierarchy is a complex type of cognitive work. While animation alone is not a suitable substitute for visible navigation with clear, unbranded labels, it can signal to users the direction in which they are moving within a process or hierarchy; this supplemental cue can make navigation through a complex IA more intuitive and understandable.

Zooming animations can help users understand the direction of their journey into a hierarchical information space without looking at a tree diagram. Zooming out shows less detail, but more objects, thus suggesting that the user travels up into the hierarchy, whereas zooming in shows more detail, but fewer objects, creating the impression of going deeper into the hierarchy.

iOS Photos uses a zoom metaphor to show the user’s location in the information space (in this case, represented by my endless library of photos of my dog, Daphne). Going between Years, Months, and Days has a subtle zoom-in or zoom-out animation that helps users understand whether they are going up or down in the hierarchy of photos. This approach helps keep the user’s attention on content (cute dog photos), and not on the navigation chrome.

Likewise, a slide-over animation helps to establish that a user is moving forward or backward within a process such as checkout.

Amtrak shows a subtle slide-over animation to indicate that the user is moving forward through the process of booking a train.

Animations can also prevent disorientation and telling people if they are on the same page or have moved on — particularly on mobile, where context can be lost due to the small screen size.  Accordions, anchor links, and menu overlays can be disorienting or confusing if the change appears instantaneously; since a menu overlay fills the entire screen, the relationship between the overlay and the underlying page (e.g., “is this content a new page, or is it something else?”) is hard to understand without an animated cue. (Why does it matter if users know where they are? If they think they are on a new page, they are often tempted to use the Back button to navigate to the previous view; unfortunately, in the case of overlays or accordions, that action will take them away from the page instead of simply closing the element.)

WebMD: When opening an accordion on the page, the associated content immediately shows up at the top of the screen (with no animation). The user may think that the new content is on a brand new page. A scrolling animation (showing how the page is moved so that the accordion is at the top of the screen), followed by a moving expansion could help the user to understand that this is not a completely new page, but an accordion within the page’s content.

MetMuseum: Anchor links are often confusing or disorienting for users, but in this case, the anchor links use a smooth scrolling animation to show (1) that the content is all contained on a single page and  (2) where it is on that page.

Motion as a Signifier

Animations help users understand how to interact with UI elements. The direction (or other attributes) of the motion signifies the type of acceptable actions. For example, a card that expands from the bottom of the screen towards the top signals to the user that it can be closed by pulling down. A new card that comes from the right of the screen signals that it can be closed by swiping it to the right.

Apple Music for iPhone: the Now Playing card animates up into place in a manner that helps the user understand that this view can be dismissed by pulling down, rather than swiping left or right on the edge.

Car2Go for iPhone: A short bounce animation is a signifier that swiping across the list item reveals options.

Attention Grabbing and Attention Hijacking

Because the human visual system is very sensitive to motion (particularly, to motion that appears to have animacy), animation can be used to grab users’ attention, for better or worse. On the one hand, it can make a subtle signifier obvious, but on the other hand, gratuitous animations distract and annoy the user. Further, using animation to hijack the users’ attention or create a fear of loss is a dark pattern: an unethical application of user-experience principles and cognitive psychology to get users to do something they ordinarily wouldn’t.

Benign: Refinery29 embeds a poll in the middle of a story about social media’s mental health effects and shows a radiating halo on the slider’s knob to reinforce the signifier and catch the user’s attention. This limited use of animation is a relatively benign (though mostly unhelpful) way of catching the user’s attention. Were animations widespread throughout the site, this animation would be a distracting usability problem.

Distracting: The moving squiggle on Outline’s content pages adds no benefit, but needlessly draws the attention of the user away from the content.

Dark pattern: A flashing countdown clock on warmlydecor.com indicates that a sale is about to end (by a puzzling coincidence, in just under an hour for every single product on the site, no matter when you visit). The clock activates the powerful loss-aversion instinct in users, and the flashing (with a subtle enlarging of the digits as they flash) is very difficult to avoid attending to.

In summary, when UI animations are subtle, unobtrusive, and brief, they can improve the user experience and can communicate feedback and state changes, prevent disorientation, and strengthen signifiers. But they should not be overused, as they can easily become overwhelming and distract users.

References

Head, V. (2016) Designing Interface Animation. Rosenfeld Media. 

Saffer, D. (2014). Microinteractions. O’Reilly Media.

Pratt, J., Radulescu, P., Guo, R.M., & Abrams, R.A. (2010). It’s Alive! Animate motion captures visual attention. Psychological Science, 21, 1724–1730

interactivity-and-animation-with-variable-fonts

If you read Jason’s introductory article about variable fonts, you’ll understand the many benefits and opportunities that they offer in modern web development. From this point on we’ll assume that you have either read Jason’s introduction or have some prior knowledge of variable fonts so we can skip over the getting started information. If you haven’t read up on variable fonts before jump over to “Introduction to Variable Fonts: Everything you thought you knew about fonts just changed” first and then come join me back here so we can dive into using variable fonts for interactivity and animations!

Creative Opportunities

If we can use variable fonts to improve the performance of our websites while increasing the amount of style variations available to us, it means that we no longer need to trade off design for performance. Creativity can be the driving force behind our decisions, rather than performance and technical limitations.

The word 'cookie' with the letters looking like cookies with icing and sprinkles.
Cookie text effect font: This Man is a Monster, by Comic Book Fonts.

My goal is to demonstrate how to create interactive, creative text on the web by combining variable fonts with CSS and JavaScript techniques that you may already be familiar with. With the introduction of variable fonts, designs which would have previously been a heavy burden on performance, or simply impossible due to technical limitations, are now completely possible.

A poem written stylistically with different typography.
Still I Rise Poem by Maya Angelou, Demo emphasising different words with variable fonts. View on Codepen.
A poem written stylistically with different typography.
Variable fonts demo with CSS Grid using multiple weights and font sizes to emphasise different parts of the message. View on Codepen.

The tone and intent of our words can be more effectively represented with less worry over the impacts of loading in “too many font weights” (or other styles). This means that we can start a new path and focus on representing the content in more meaningful ways. For example, emphasising different words, or phrases depending on their importance in the story or content.

Candy Cane Christmas Themed Text Effect with FS Pimlico Glow by Font Smith. View on Codepen.

Note: using variable fonts does not negate the need for a good web font performance strategy! This is still important, because after all, they are still fonts. Keep that in mind and check out some of the great work done by Monica Dinculescu, Zach Leatherman or this incredible article by Helen Homes.

Variable Fonts & Animations

Because variable fonts can have an interpolated range of values we can leverage the flexibility and interactive nature of the web. Rather than using SVG, videos or JavaScript to accomplish these effects, we can create animations or transitions using real text, and we can do this using techniques we may already be familiar with. This means we can have editable, selectable, searchable, copy-pastable text, which is accessible via a screenreader.

Grass Variable Font Demo

Growing Grass Variable Font Text. Demo on Codepen.

This effect is achieved using a font called Decovar, by David Berlow. To achieve the animation effect we only need a couple of things to get started.

First, we set up the font-family and make use of the new property font-variation-settings to access the different axes available in Decovar.

h1 {
  font-family: "Decovar";
  font-variation-settings: 'INLN' 1000, 'SWRM' 1000;
}

For this effect, we use two custom axis – the first is called “inline” and is represented by the code INLI and the second is “skeleton worm” represented by the code SWRM. For both axes, the maximum value is 1000 and the minimum value is 0. For this effect, we’ll make the most of the full axis range.

Once we have the base set up, we can create the animation. There are a number of ways to animate variable fonts. In this demo, we’ll use CSS keyframe animations and the font-variation-settings property, but you can also use CSS transitions and JavaScript as well.

The code below will start with the “leaves” expanded and then shrink back until it disappears.

@keyframes grow {
  0% {
    font-variation-settings: 'INLN' 1000, 'SWRM' 1000;
  }
  100% {
    font-variation-settings: 'INLN' 1000, 'SWRM' 0;
  }
}

Once we have created the keyframes we can add the animation to the h1 element, and that is the last piece needed in order to create the animation.

h1 {
  font-family: "Decovar";
  font-variation-settings: 'INLN' 1000, 'SWRM' 1000;
  animation: grow 4s linear alternate infinite;
}

What this demonstrates is that typically, to accomplish effects like this, the heavy lifting is done by the font. We really only need a few lines of CSS for the animation, which if you think about it, is pretty incredible.

There are all sorts of interesting, creative applications of variable fonts, and a lot of incredible fonts you can make the most of. Whether you want to create that “hand-writing” effect that we often see represented with SVG, or something a little different, there are a lot of different options.

Duos Writer: Hand Writing

Demo of hand writing variable font, Duos Writer by Underware.

Decovar: Disappearing Text

See the Pen CSS-only variable font demo using Decovar Regular by Mandy Michael (@mandymichael) on CodePen.

Cheee: Snow Text

Snow Text Effect – Text fills up with snow and gets “heavier” at the bottom as more snow gathers. Featuring “Cheee” by OhNoTypeCo. View on Codepen.

Variable Fonts, Media Queries and Customisation

It’s not that these are just beautiful or cool effects, what they demonstrate is that as developers and designers we can now control the font itself and that that means is that variable fonts allow typography on the web to adapt to the flexible nature of our screens, environments and devices.

We can even make use of different CSS media queries to provide more control over our designs based on environments, light contrast and colour schemes.

Though the CSS Media Queries Level 5 Spec is still in draft stages, we can experiment with the prefers-color-scheme (also known as dark mode) media query right now!

Dark Mode featuring Oozing Cheee by OhNoTypeCo

Oozing Dark Mode Text featuring “Cheee” by OhNoTypeCo. View Demo on Codepen.

The above example uses a font called “Cheee” by OhNoTypeCo and demonstrates how to make use of a CSS Transition and the prefers-color-scheme media query to transition the axis of a variable font.

h1 {
  font-family: “Cheee"
  font-variation-settings: "TEMP" 0;
  transition: all 4s linear;
}

@media (prefers-color-scheme: dark) {
  h1 {
    font-variation-settings: "TEMP" 1000;
  }
}

Dark mode isn’t just about changing the colours, it’s important to consider things like weight as well. It’s the combination of the weight, colour and size of a font that determines how legible and accessible it is for the user. In the example above, I’m creating a fun effect – but more practically, dark mode allows us to modify the contrast and styles to ensure better legibility and usability in different environments.

What is even more exciting about variable fonts in this context is that if developers and designers can have this finer control over our fonts to create more legible, accessible text, it also means the user has access to this as well. As a result, users that create their own stylesheets to customise the experience to their specific requirements, can now adjust the pages font weight, width or other available axis to what best suits them. Providing users with this kind of flexibility is such an incredible opportunity that we have never had before!

As CSS develops, we’ll have access to different environmental and system features that allow us to take advantage of our users unique circumstances. We can start to design our typography to adjust to things like screen width – which might allow us to tweak the font weight, width, optical size or other axes to be more readable on smaller or larger screens. Where the viewport is wide we can have more detail, when its smaller in a more confined space we might look at reducing the width of the font—this helps to maintain the integrity of the design as the viewport gets smaller or, to fit text into a particular space.

See the Pen CSS is Awesome – Variable fonts Edition. by Mandy Michael (@mandymichael) on CodePen.

We have all been in the situation where we just need the text to be slightly narrower to fit within the available space. If you use a variable font with a width axis you can slightly modify the width to adjust to the space available, and do so in a way that the font was designed to do, rather than using things like letter spacing which doesn’t consider the kerning of the characters.

Variable Fonts, JavaScript and Interactive Effects

We can take these concepts even further and mix in a little JavaScript to make use of a whole suite of different interactions, events, sensors and apis. The best part about this is whether you are using device orientation, light sensors, viewport resizes, scroll events or mouse movement, the base JavaScript doesn’t really change.

To demonstrate this, we’ll use a straightforward example – we’ll match our font weight to the size of our viewport – as the viewport gets smaller, the font weight gets heavier.

Demo: As the viewport width changes, the weight of the text “Jello” becomes heavier.

We’ll start off by setting our base values. We need to define the minimum and maximum axis values for the font weight, and the minimum and maximum event range, in this case the viewport size. Basically we’re defining the start and end points for both the font and the event.

// Font weight axis range
const minAxisValue = 200
const maxAxisValue = 900

// Viewport range
const minEventValue = 320px
const maxEventValue = 1440px

Next we determine the current viewport width, which we can access with something like window.innerWidth.

// Current viewport width
const windowWidth = window.innerWidth

Using the current viewport width value, we create the new scale for the viewport, so rather than the pixels values we convert it to a range of 0 – 0.99.

const windowSize = (windowWidth - minEventValue) / (maxEventValue - minEventValue)
// Outputs a value from 0 - 0.99

We then take that new viewport decimal value and use it to determine the font weight based on viewport scale.

const fontWeight = windowSize * (minAxisValue - maxAxisValue)   maxAxisValue;
// Outputs a value from 200 - 900 including decimal places

This final value is what we use to update our CSS. You can do this however you want – lately I like to use CSS Custom Properties. This will pass the newly calculated font weight value into our CSS and update the weight as needed.

// JavaScript
p.style.setProperty("--weight", fontWeight);

Finally, we can put all this inside a function and inside an event listener for window resize. You can modify this however you need to in order to improve performance, but in essence, this is all you need to achieve the desired outcome.

function fluidAxisVariation() {
  // Current viewport width
  const windowWidth = window.innerWidth

  // Get new scales for viewport and font weight
  const viewportScale = (windowWidth - 320) / (1440 - 320);
  const fontWeightScale = viewportScale * (200 - 900)   900;

  // Set in CSS using CSS Custom Property
  p.style.setProperty("--weight", fontWeightScale);
}

window.addEventListener("resize", fluidAxisVariation);

You can apply this to single elements, or multiple. In this case, I’m changing the paragraph font weights and different rates, but also reducing the width axis of the headline so it doesn’t wrap onto multiple lines.

As previously mentioned, this code can be used to create all sorts of really amazing, interesting effects. All that’s required is passing in different event and axis values.

In the following example, I’m using mouse position events to change the direction and rotation of the stretchy slinky effect provided by the font “Whoa” by Scribble Tone.

See the Pen Slinky Text – WHOA Variable font demo by Mandy Michael (@mandymichael) on CodePen.

We can also take the dark mode/colour schemes idea further by making use of the Ambient Light Sensor to modify the font to be more legible and readable in low light environments.

This effect uses Tiny by Jack Halten Fahnestock from Velvetyne Type Foundry and demonstrates how we modify our text based by query the characteristics of the user’s display or light-level, sound or other sensors.

It’s only because Variable fonts give us more control over each of these elements that we can fine-tune the font characteristics to maximise the legibility, readability and overall accessibility of our website text. And while these examples might seem trivial, they are great demonstrations of the possibilities. This is a level of control over our fonts and text that is unprecedented.

Using device orientation to change the scale and weight of individual characters. View on Codepen.

Variable Fonts offer a new world of interactivity, usability and accessibility, but they are still a new technology. This means we have the opportunity to figure out how and what we can achieve with them. From where I stand, the possibilities are endless, so don’t be limited by what we can already do – the web is still young and there is so much for us to create. Variable fonts open up doors that never existed before and they give us an opportunity to think more creatively about how we can create better experiences for our users.

At the very least, we can improve the performance of our websites, but at best, we can make more usable, more accessible, and more meaningful content – and that, is what gets me really excited about the future of web typography with variable fonts.

what-animation-taught-me-about-ux-design

Giedre Kazlauskaite

An animation is a process of making movies with drawings, computer graphics, or photographs of static objects, where animator creates multiple images, known as frames, which give an illusion of movement called animation when displayed in rapid sequence.

Animation magic and reality

Animation is one the most magical worlds you could think of, yet animators are crazy to make it realistic. To create believable emotion. Imaginary reality might be highly stylized but realistically recognizable. Animators create the worlds not necessarily matching the real world, however, some aspects are way more real. To create perfect motion, in collaboration with physicist, animators deeply analyze the motion of a particular object or movement. How physics principles affect the coat of a landing superhero. For example animators of The Megamind have tested various coats and landings. Different thickness and length of fabric fall differently, for this reason they have collaborated with professors of physics. The Megamind world might not match our world but it definitely creates believable emotion.

Megamind concept design by Andy Bialk (animator and character designer)

In my bachelor thesis, I was looking for answers to how imagination and reality correlate in animation. Why the smallest unrealistic detail distracts us and may lead to abandoning the creator’s work because some not realistically displayed motion distracted our unconscious reality and hence believable emotion has vanished. No one questions flying pig in the animation world, but if pig flies not in the way we perceive flying, hmmm…

Back then professor told me: imagine your room, you could cross it with your eyes closed in the dark, knowing all the smallest objects around you. Now imagine someone has changed the setting of your room. You have suddenly been brought back to reality. Suddenly I am questioning flying technique.

Inbetween and usability testing

In university, my most demanding and joyful classes were animation classes. Demanding because of complexity (you will see) and details you have to look over. Joyful, well, because of the magic moment you create and nothings is impossible feeling.

To better understand complexity I feel the need to give a quick overview of technicality. There are 24 frames (still images captured that still looks smooth enough to look real) required for a second of film. Typically animator doesn’t draw 24 images. Animation movement can be done in 12 drawings. Apart from 4 main key poses, it’s up to you how many inbetweens you will draw. Inbetweens are drawings that create an illusion of motion. However, too little inbetweens brings danger of losing realistic movement.

Walking cycle. Key poses and couple of inbetweens (4,11 also known as passing points)

A walking cycle in animation has 12 steps. Key contact points, passing, high points (take a look at the image above) and the rest are inbetweens (missing numbers 3,6,9,12). After many hours of working, the walking cycle takes overall 1 second. Sounds familiar?

That’s how full cycle with inbetweens looks like. Overwhelming, right?

You as UX designer may happen to design experience of a few seconds, for a user to complete the task or reach the goal. You act as an animator knowing exactly how to draw 12 steps before and test in between to bring seamless realistic artifact to a user. Despite that, key steps are the most important but without inbetweens, it looks unrealistic, exaggerated, unbelievable.

In parallel with UX, you should conduct usability testing iteratively as much as it takes to bring the best seamless functional experience to the user.

Besides, it’s important to draw two guidelines at the beginning. Two parallel horizontal lines. These lines will guide character not to drift too low or too high.

My first walking cycle

Here is my first walking cycle. Looks like the character is having hiccups, I know, but I was pretty proud of it. Obviously, something went wrong with inbetweens and character lost guidelines at some points. There you go, visual representation to your stakeholders of what happens when you decide not to follow or set guidelines from the beginning. Just kidding, but they say visual language is more powerful than words.

Animation character and a persona

Animation does not stop at perfect believable movement. Animators breathe in life to their characters by creating emotion and personality.

When designing a character, we were asked to divide characteristics to three lists: actions he does, physical and character features. To which list would you place the sentence: my character smiles a lot? Physical, action, feature? I used to mix this and place in character feature, however, this is physical characteristic because animator has to draw it. Smiling is a physical appearance of being happy therefore correct way to say is my character is happy (character feature).

As for the UX world, personas are fictional characters, which you create based on your research to represent the different user types. Could you relate to animator when you are listing attitudes, motivations, goals, pain points of your user persona? I hope you do 🙂

UX designer as animator

For me, UX people are like animators. Creating a walking cycle of UX, knowing where to draw key contact points, empathize with the user, finding characteristics. How many inbetweens, usability testings are necessary to create functional design. Being able to brainstorm like anything is possible, later bringing all the ideas down to earth.

So what animation taught me about UX?

Test test and test. Turn back, find a flaw and improve it so that flaw doesn’t disturb the user at the end.

Draw and follow guidelines for a smooth project cycle.

Innovate. Use imagination, make it visually appealing but always, always integrate the solution with the user’s natural environment.

Be patient and care for the viewer (user). One second of smooth animation will take hours of your time.

Research your character. Why he smiles, how he smiles, what his smile brings to the story.

It’s been awhile from my last drawn walking cycle, but the experience still goes in hand when walking the UX project cycle.

References:

physics in animation: https://www.youtube.com/watch?v=h6iu7e7jS1o

Images and recap www.angryanimator.com

web-animation-in-the-post-flash-era

In this fiercely competitive environment, companies are frantically looking for ways to capture and retain people’s attention. As we go about our daily lives, the endless stream of visual stimulation gushing at us from animated ads on the street, videos on our mobiles, not to mention our social media feeds, creates a sense of constant movement that is vying for our attention.

The split-second reaction to movement in our environment was developed out of the need to survive and triggered by environmental stimuli perceived as potentially threatening or harmful; people pay extra attention to things that move. As we catch something moving fast out of the corner of our eye, the brain alerts us in a split-second because our subconscious brain has already reacted to the danger before our conscious mind has had time to process the information.

Advertisers know this, and it is why we have animated street advertisements at bus stops and on subway platforms, video ads popping up in social media streams, and electronic billboards with full-motion video. The technique is a one-two punch effect designed to deliver marketing messages. First, by capturing our attention, and second, using video and animation to get the message across.

If a static picture is worth a thousand words, how much is an animation worth?

This is where web animation comes in. Web designers are hoping to capture and hold our attention, and maybe add an unexpected jolt of delight. Web animation can be used to visualize various steps in a complex process or idea, to illustrate a simple marketing message, or to move things on a web page in a natural and fluid way as people scroll—again, to draw attention to something.

Web animation without Flash.
A landing page with motion and web animation (by Mason Yarnell for Mixpanel).

How Web Animation Got Started, the Rise of GIFs

During the early days of the World Wide Web, things were rather static and boring. Webpages were mostly based on graphic design and layouts from the print world. However, some designers made a concerted effort—despite the technical and bandwidth challenges—to include early forms of web animation in order to make them more dynamic and attractive. One of the first additions of a GIF animation to a website was on Jeffrey Zeldman’s Batman Forever in 1995. Visitors were greeted by Batman’s flight towards them, animated as a picture sequence.

The Batman Forever promo site was one of the most popular sites at the time. It inspired other web designers and developers to incorporate GIF web animation as a quirky, eye-catching element into their websites.

The first web animation was a GIF animation on a website for Batman Forever in 1995.

Fast-forward 20 years and animated GIFs are now everywhere. They’re on Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram, and Facebook. GIFs are suitable for short loop animations, image sequences, and even short video loops. An unfortunate shortcoming though is that the GIF file format doesn’t have variable transparency and doesn’t support an alpha channel; therefore, all pixels are either fully opaque or completely transparent.

GIF animations were the beginning of a renaissance in web design, but they were not ideal. Especially back in the early days of dial-up and slow internet speeds, GIFs were bandwidth hogs. The result was a low-resolution, pixelated sequence. The drawback for designers having to compress GIFs to the smallest possible size was a limited 8-bit palette, which resulted in a lot of dithering. This changed with high-speed internet becoming more commonplace in the 21st Century, and as a consequence, web animation became better looking with millions of colors, and smoother with higher frame-rates.

Snowglobe Elvis was one of the early animated GIFs web animations without Flash.

The Dawn of Flash Web Animation

The big web animation boom came with the introduction of Flash in 1996 when Macromedia announced their web plugin and accompanying frame-based animation tool: Macromedia Flash (after they acquired FutureSplash Animator, a vector animation program). Flash played a leading role in bringing new capabilities to the web. From audio and animation to interactivity and video, Flash helped to push the internet forward.

The opportunity to build simple, lean, vector-based web animations across entire sites that included interactions, created what could be called web design’s “baroque” period with (too) many animated elements crowding the landscape. Nevertheless, Flash offered a glimpse into the possibilities of dynamic web design, freeing up designers to experiment and unleashing a period of rapid web design evolution.

Flash animations are lightweight and relatively easy to make. Only a few kilobytes in size, they are distributed in SWF file format and a file using sound with crisp vector graphics. Creating web animations became a streamlined process that didn’t add much to webpage load times. But for all that a significant drawback remained—a browser plugin was required for it to run.

Web animation with Macromedia Flash in the 1990s.
The Flash animation software tool with layers and a timeline-based interface.

Additionally, sophisticated interaction in Flash was enabled by ActionScript (AS), an object-oriented programming language similar to JavaScript. ActionScript was initially designed to control simple 2D vector animations but subsequently evolved into a sophisticated tool.

Unfortunately, Flash animation wasn’t intended to be responsive, didn’t function well on all devices, and was eventually dropped from all popular mobile devices. While the file size was relatively small, Flash was not well-optimized and ended up CPU hungry, which was a problem on mobiles as well. The end of the Flash era came after Steve Jobs decided not to support Flash on Apple mobile devices.

Flash was created during the PC era—for PCs and mice. But the mobile era is about low power devices, touch interfaces, and open web standards—all areas where Flash falls short.

Steve Jobs

Flash web animation.
A web animation created in Adobe Flash.

Web Animation Today

Today, as Flash is obsolete, we have different needs for web animation. Tools must be flexible and light. Web designers must create responsive and adaptable content for different devices (desktop, tablet, and mobile), taking into account various screen dimensions, browsers, aspect ratios, pixel densities, and more. Our web animation masterpieces have to work on a 5-inch, 720px mobile through to a 9.7-inch QXGA tablet, to a 32-inch Retina 6K display.

Technology has matured to a point where even underpowered mobile devices have the bandwidth and processing power to handle very demanding web animations and high-resolution video content. This doesn’t mean websites should be super “busy.” As always, it’s about striking the right balance between the animation, dynamic interaction, and static elements. The fact that we can implement a lot of fancy web animation today doesn’t mean that we should.

Web designers/animators must also consider cross-platform support. Ten years ago, designers did not have to make sure that their creations would look good on such a wide range of devices. Different aspect ratios, portrait, and landscape orientations, as well as various pixel densities and viewing distances have to be taken into account. This conundrum presents web designers with a set of new challenges and potential pitfalls. User testing consumes precious time, more things could go wrong on a multitude of platforms, and web animations have to be more detailed than ever.

HTML5, CSS3, JavaScript, and SVG (scalable graphics) seem to be the best solutions for web animation. Using these modern web technologies and languages will help tackle most, but not all, of the above problems. But it’s always a good idea to tread carefully, especially when in uncharted territory, and extensive QA and testing is a must.

Ikea logo animation using web animation techniques.

Why Use Web Animation?

Web animation can engage and hold people’s attention longer than a static web page and communicates an idea or concept more clearly and effectively. Excellent web animation conveys a story behind every bit of movement. It’s all about bringing an animation to life with meaning and “soul” (lat. anima).

Web animation should be smooth, meaningful, and support the visitor’s journey. The web designer/animator needs to be aware of how the animation fits into the user experience, try to predict likely user flows, and then support it in a meaningful way.

Web designers mustn’t look at web animation from a purely technical perspective; they need to look at it from the user’s perspective.

One of the essential things about animation is timing. Proper timing gives physical and emotional meaning to an animation. The experience should be seamless and logical. If the animation is not fluid (has a timing problem), people could perceive it as a bug and lose all motivation to explore the website further.

The animator needs to use appropriate timing to provide the intended effect. How many keyframes should be used in the animation? What kind of dynamic change in the animation is due to visitor interaction, and how fast does the response come after the interaction? Is the animation whimsical, serious, entertaining?

From a logical point of view, we can divide web animation into two basic types:

  • A static, non-interactive web animation, for example, a GIF animation.
  • A dynamic web animation with user engagement and interactivity that changes on user input.
Google web animation without Flash.

The best example of dynamic animation is a game, where users manipulate the on-screen content. Another simple example would be changing the position of certain elements as a website visitor scrolls through a parallax-scrolling website. The animation is not passive, it varies depending on user actions.

Dynamic web animation is often used to present animated infographics on a website, so people pay more attention to specific areas while scrolling the page—it’s a powerful way to highlight relevant information.

The Pros and Cons of Web Animation

Here are some pros and cons of web animation techniques, including legacy solutions that are no longer in use.

Technique Pros Cons
GIF It is simple and available to everyone. No browser plugin required. It enables picture sequence animation, It can be video-like. The size of animated gif files can be huge. Opacity control is non-existent, there is no alpha channel. It has low compression. It can be pixelated.
APNG Supports alpha channel. Not supported in most web browsers.
Flash The exported swf file can be quite small. It’s fast, can be interactive, and it uses vector animation. No longer supported on most platforms.
HTML/ CSS3 Simple and easy to learn. Good for transitions and transformations. HTML/CSS3 animations run well on mobile devices. It allows vector or pixel animation. Can also manipulate scalable vector graphics (SVG). Not all SVG properties can be animated with CSS. It has limited possibilities for animation and often requires use of JavaScript or a SMIL. It cannot respond to new inputs or a changing environment (dynamic animation).
SMIL It’s compact and capable of animating properties that CSS can’t handle. Preserves SVG when embedded as an image. Not supported in all browsers.
JavaScript Makes web animation easy when using an SVG animation library that generates an image sequence (.png sequence) Doesn’t preserve SVG when embedded as an image.
Web animation without Flash.

What about the pros and cons of web animation in general? Well-executed web animation can still look out of place, so it’s always a good idea to ask some crucial questions (as well as quiz clients and other team members) before proceeding to integrate animation into a website’s design.

First, we need to check how the animation will affect the user experience. Will it improve the website’s UX? Designers ought to:

  • Examine the existing website design (if available)
  • Check the target audience and the hardware platforms they use
  • Check the site load times and CPU load
  • Explore other alternatives
  • Keep an eye on usability

It’s not a good idea to use web animation on a site to simply follow trends.

The decision to use web animation should be treated as any other design decision; web designers must weigh the pros and cons and make sure that the user experience is not compromised. They should also work with developers to ascertain code requirements and ensure they won’t get stuck with inefficient code that may have to be tweaked down the road.

Modern web animation technology has matured significantly in the last 20 years—performance, available bandwidth, and rendering quality have increased. However, designers should tread carefully and only add animation to a website if it meaningfully enhances the user experience.

• • •

Further reading on the Toptal Design Blog:

You’ve probably noticed it: animation is everywhere these days. A quick glance at the Dribbble feed and you’ll see many designers have started using motion graphics in their work to add another layer of interest to an otherwise static image.

With motion design exploding, you don’t exactly have to be a trained animator to get your hands dirty in this space. In fact, we highly encourage learning some basic animation techniques so you can take your design or illustration portfolio to the next level. Even the most simple animations in your work will give your portfolio an edge and help you stand-out in the hiring pool. You’ll make a lasting impression on potential clients and more effectively grab the attention of your audience.

If you’re thinking about dipping your toes in the world of motion, we’ve got some extra helpful animation tutorials from Skillshare for you to start with. These six video tutorials will serve as a wonderful starting point for learning the basics of motion and bringing your designs to life.

Our friends at Skillshare have generously offered Dribbblers a 2-month Skillshare trial subscription so you can start learning animation using these video classes and hundreds more right away. To watch the full classes, click through any of the links below, follow the prompts to create your Skillshare profile, input your billing info (you will not be charged until the 2-month trial ends) and start watching to take your design work to the next level.

1. Add Movement to your Illustrations

“Jump into the world of animation with illustrator Libby VanderPloeg — using only Procreate and Photoshop! From planning a sketch with motion in mind to sharing your final work on the web, Libby will teach you everything you need to know to create your very own animated illustration. The best part? It’s easier than you think. Libby will show you how to add motion to your work with just a few simple tweaks to your original illustration.”

Software you’ll need: Procreate & Adobe Photoshop

What you’ll learn:

  • Create your initial sketch with an eye toward animation
  • Use Procreate layers to plan movement and motion
  • Activate your animation in Photoshop with just a few clicks
  • Export your work as a GIF or video

2. Animation for Illustration: Create Layered GIFs

“In this comprehensive class, illustrator and animator Abbey Lossing shows you how to bring your Photoshop creations to life by adding a few introductory steps in Adobe After Effects. From sketching and coloring to timing out motion and exporting to share, Abbey will teach you everything you need to know to create show-stopping animations that marry the hand-drawn quality of Photoshop with the cinematic look of After Effects.”

Software you’ll need: Adobe Photoshop & Adobe After Effects

What you’ll learn:

  • Sketch and color a quirky scene with an eye toward motion
  • Use video layers in Photoshop to animate your character
  • Structure your files to stay organized and easily make changes
  • Activate your animation with introductory tools in After Effects

3. How to Animate a Logo

“This class is perfect for designers who want to learn how to bring their static work into the world of movement. William Kesling covers everything from initial storyboards to animating in After Effects. You’ll see how to transform an existing logo into an enticing motion design that captures eyes and conveys a brand’s story.”

Software you’ll need: Adobe Illustrator & Adobe After Effects

What you’ll learn:

  • Make an animation plan with storyboards
  • Break down a logo into its layers in Illustrator
  • Build initial scenes in After Effects
  • Make transitions for a seamless animation
  • Create a final loop and export your project

4. The Beginner’s Guide to Animating Custom GIFs

“This is the quick and easy total beginner’s guide to getting up and running in Adobe After Effects. No experience necessary! Jake Bartlett shows you how to use the tools inside of the program, animate your design into a loop, and export a GIF in Photoshop to share with your friends!”

Software you’ll need: Adobe Illustrator & Adobe After Effects

What you’ll learn:

  • Make your own custom .gif files
  • How to organize your After Effects workspace
  • Animate individual objects within layers
  • Rotate objects as they move

5. How to Create Hand-Lettered GIFs

“In this class, we’re going to be making a fun doodle-styled lettered gif that you can send to a friend or post on Instagram. The process is super quick, easy and fun! No need to be an advanced letterer, even simple handwriting can create an awesome gif. Taught by Jamie Bartlett.”

Software you’ll need: Adobe Photoshop

What you’ll do:

  • Pick a phrase and post it to your class project
  • Sketch your lettering and share it with the class
  • Trace and scan your lettering
  • Color and animate your gif
  • Post your final gif to your class project

6. Simple Character Animation

“In this class, Fraser Davidson walks you through a simple process where you’ll learn to build and rig a simple character for animation and share it as a gif! Learn simple character creation and animation techniques from design and rigging, through to simple walk cycle animation. You will learn about shape layers, paths, masks, key framing, and key frame velocity – and how to apply them to your animations.”

Software you’ll need: Adobe Illustrator & Adobe After Effects

What you’ll learn:

  • Simple character design in Adobe Illustrator, and how to design with After Effects animation in mind.
  • Take your character from Illustrator, and import it into After Effects to build him for animation.
  • Rigging in After Effects: The process of rigging your character for simple motion in After Effects.
  • Walk or run cycle: Finalize your action and get your character moving in a scene.
  • Export your animated GIF: The process for getting your animation shareable and out there!

There you have it! An ultimate list of animation tutorials for the non-motion designer. We’re so excited for you to give these lessons a try and add some pizzaz to your portfolio. Whatever your design specialty is, whether it be graphic design, illustration, or lettering — remember it’s never too late to learn new a new skill.


Find more Process stories on our blog Courtside.
Have a suggestion? Contact stories@dribbble.com.

variable-font-animation-with-css-and-splitting-js

A little while ago I made an animated variable font demo on Codepen. In this article I’ll explain what variable fonts are, how they can be animated with CSS, and how I created a breathing effect with CSS and a little bit of Javascript.

Introducing variable fonts

Variable fonts are exciting new development in web typography. Instead of multiple font files to load different variants of a particular font, variable fonts allow us to load all of the variations from a single file. In most cases this is a big performance win (although the file tends to be larger than a regular font file on its own, so it’s best to only use a variable font if you actually need it).

One font, many variations

Instead of a handful of font weights that are only available in multiples of 100 (e.g. font-weight: 600), variable fonts provide a range of values, all from a single file. The weight can be varied anywhere within that range. So font-weight: 372 is perfectly valid!

Axes of variation

Weight is just one of the axes of variation (although probably the most common one). Variable fonts can come with different axes too. There are a number of registered axes, which correspond to a four-letter tag:

  • weight (wght)
  • width (wdth)
  • italic (ital)
  • slant (slnt)
  • optical size (opsz)

These correspond to CSS properties and values:

  • font-weight
  • font-stretch
  • font-style
  • font-style
  • font-optical-sizing

Not all variable fonts contain all of these axes of variation. Many contain just one or two.

They can also be accessed using the font-variation-settings property. This property enables us to not only adjust the standard axes, but custom axes as well. So font-weight could be specified in two ways:

or

font-variation-settings: 'wght' 372;

Custom axes

Custom axes provide the type designer with infinite scope for creativity! A custom axis of variation could be literally anything – some, like x-height, might be fairly common for a typeface, but there are many more creative possibilities.

Custom axes can be accessed with the font-variation-settings property but, unline standard axes, their four-letter tag name must be uppercase. The variable font Movement by NM Type provides a custom axis called space, which controls the curvture of the letterforms.

font-variation-settings: 'wght' 200, 'SPAC' 118;

Try playing around with the different axes in this demo:

Animating a variable font with CSS

font-variation-settings is animatable, and because it covers a range of values rather than increments of 100, we can get some really nice effects with simple CSS transitions or keyframe animations. The font IBM Plex Sans has two axes of variation: weight and width. The following code sets a 1s looping animation of both axes:

h1 {
	font-variation-settings: 'wght' 100, 'wdth' 85;
	animation: breathe 4000ms infinite forwards;
}

@keyframes breathe {
	60% {
		font-variation-settings: 'wght' 700, 'wdth' 100;
	}

	100% {
		font-variation-settings: 'wght' 100, 'wdth' 85;
	}
}

This gives the effect of our text breathing in and out!

Alternatively, this could be a nice hover effect with a transition instead of an animation.

Staggering the animation

Instead of our entire text animating at the same rate, it might be nice to have our letterforms animate in sequence. We could wrap each letter of our text in a and set a animation-delay on each one:

<h1>
	<span>Bspan>
	<span>rspan>
	<span>espan>
	<span>aspan>
	<span>tspan>
	<span>hspan>
	<span>ispan>
	<span>nspan>
	<span>gspan>
h1>
h1 span:nth-child(2) {
	animation-delay: 400ms;
}

h1 span:nth-child(3) {
	animation-delay: 800ms;
}

h1 span:nth-child(4) {
	animation-delay: 1200ms;
}

This would be a bit laborious to write (although we could use Sass to help us), and it wouldn’t be very maintainable if we decided to change our text content at a later date.

But if we don’t mind using just a little bit of Javascript, there’s a great library called Splitting.js that is perfect for this!

Splitting

Splitting’s primary use case is for animating text, although it’s also possible to split grids and layouts for some cool effects. To use it we need to include the library in our project, then set a data-splitting attribute on the element we’d like to animate:

<h1 data-splitting>Breathingh1>

Now the JS we need to write is very simple:

Splitting then splits our text element into a series of s, each with a class, a data-attribute and a custom property definition with a value of the character index, which we can then access in our CSS:

<span class="word" data-word="Breathing" style="--word-index:0;">
	<span class="char" data-char="B" style="--char-index:0;">Bspan>
	<span class="char" data-char="r" style="--char-index:1;">rspan>
	<span class="char" data-char="e" style="--char-index:2;">espan>
	<span class="char" data-char="a" style="--char-index:3;">aspan>
	<span class="char" data-char="t" style="--char-index:4;">tspan>
	<span class="char" data-char="h" style="--char-index:5;">hspan>
	<span class="char" data-char="i" style="--char-index:6;">ispan>
	<span class="char" data-char="n" style="--char-index:7;">nspan>
	<span class="char" data-char="g" style="--char-index:8;">gspan>
span>

In order to create a sequential animation, we can use calc() to calculate the animation-delay value for each letter from the custom property:

h1 .char {
	--delay: calc((var(--char-index)   1) * 400ms);
	animation: breathe 4000ms infinite both;
	animation-delay: var(--delay);
}

That massively cuts down on the CSS we need to write, and means that we could change the text later on and still have our animation work perfectly!

Resources

MDN’s Variable Fonts Guide

MDN’s guide is a great resource for learning about variable fonts and how to use them

V-Fonts

V-Fonts is a listing of hundreds of variable fonts, including their variations axes and where to find them. It includes a mixture of paid and free/open source fonts, and is a great place to find samples for using in demos if you don’t want to fork out big bucks just yet.

Axis-Praxis

Axis-Praxis is a playground for experimenting with variable fonts and understanding some of the creative possibilities. It includes some really interesting and creative samples!

VariableFonts.dev

Variablefonts.dev is a project by Mandy Michael, who is well-known in the CSS world for creating awe-inspiring demos with variable fonts and speaking about them all over the world.

creating-my-logo-animation

Last week I posted my new logo animation on twitter.

Amongst everyone saying a ton of lovely things, (thankyou) there was a resounding cry of “tutorial”. So I’m going to try and break it down for you. Hope this helps someone, I had a ton of fun making it!

There’s a few things going on in this logo animation. We’ve got –


I won’t dive too much into Greensock for this article. But as Sara Soueidan has said

Greensock is the best thing that happened to SVG animations since SVG animations.

Greensock provides better cross browser support for SVG animation than we get with CSS. It also, crucially, gives you the ability to chain animations and group animations on timelines. This is invaluable for longer and more complex animation.

They also have a bunch of fun plugins, some of which have been made specifically for SVG, like Draw SVG and Morph SVG.

I’ve been side-eying their custom bounce plugin for a while, so when I saw an chance to use it to give the little dot some character I jumped (bounced? 😬) at the chance.

Although I love Greensock, you don’t need to learn a whole Javascript animation library to do SVG path animations.

We can do them with CSS too. So I’ll run through a couple of different ways to create the same effect.

Let’s get going. First up…


SVG stroke-dasharray permalink

stroke-dasharray is a SVG presentation attribute (which we can use as a CSS property) to make our SVG paths dashed instead of solid. The higher the number is, the the bigger the gap between dashes.

<path stroke-dasharray="10" ... />
.dashedPath {

stroke-dasharray: 10;

}

You can play around with what these values look like in this pen.

See the Pen SVG stroke dasharray demo by Cassie Evans (@cassie-codes) on CodePen.

As well as making the dashes different lengths with stroke-dasharray, we can also offset the stroke position with stroke-dashoffset. If we change this property it looks like our dashes are moving along the path.

Like so…

See the Pen SVG stroke dashoffset demo by Cassie Evans (@cassie-codes) on CodePen.

If we make the gap between the dashes big enough and then change the offset we can create a path “drawing” effect.

See the Pen SVG stroke dashoffset demo – animating by Cassie Evans (@cassie-codes) on CodePen.

Up until now we’ve been changing the value using a range input, but dashoffset and dasharray are animatable properties, so we can animate them with CSS like so –

See the Pen SVG stroke dashoffset demo – animated with CSS by Cassie Evans (@cassie-codes) on CodePen.

We can also use Greensock’s draw svg plugin to animate the stroke.

See the Pen SVG stroke dashoffset demo – animated with GSAP by Cassie Evans (@cassie-codes) on CodePen.

Under the hood, this is how my logo animation works, but rather than having one continuous line I’ve broken the path up into nine separate sections. This gives me more control over the timing and helps to avoid any clipping overlaps, which we’ll get to in a minute.

See the Pen Cassie! – without clip paths – break down by Cassie Evans (@cassie-codes) on CodePen.

Chaining animations in CSS is a bit of a nightmare as we have to do it with animation-delay. With Greensock, you can line these animations (or tweens) up on a timeline and easily tweak the timings of each tween in relation to the others.

You may have noticed that this version of my logo looks a little… messy though? SVG paths are a consistant width the whole way along. We can change the overall stroke-width and the shape of the stroke-linecap but we can’t do much more than that.

Enter , we can use clip path to “cut out” a more stylised shape.

SVG permalink

SVG clip path can be used to clip (or hide) parts of SVG elements according to a certain path. The parts of the shape inside the are visible, and the parts outside are hidden.

This is a great CSS tricks article if you want to know more.

Lets go back to our little line animation.

In illustrator I drew out the path that we animated (purple), and then I drew a shape over the top (black). This will be used as a clip path.

This is what the syntax for a clip path looks like in SVG

<svg>

<clipPath id="myClipPath">

<circle cx="40" cy="35" r="35" />

clipPath>



<path clip-path="url(#myClipPath)"... />

svg>

Anything you put inside the clip path element will be used as a clipping object. You reference a clip path on the clipping target using an ID

You can also reference a clip path in CSS like this:

.element {

clip-path: url("#myClipPath");

}

This is what the line animation looks like with a clip path applied. Much Nicer!

See the Pen SVG stroke dashoffset demo – clip-path by Cassie Evans (@cassie-codes) on CodePen.

For my logo animation I created a clip path for each stroke.

So the end result looks like this!

See the Pen Cassie! – with clip paths – break down by Cassie Evans (@cassie-codes) on CodePen.


The duotone effect permalink

I’ve created the duotone effect by animating two paths instead of one along each section, one purple and one green.

These paths are grouped together in a element which is the target for the clipping area.

See the Pen SVG stroke dashoffset demo – Stagger – animated with GSAP by Cassie Evans (@cassie-codes) on CodePen.

Squash and stretch. permalink

The final cherry on top is the little dot on the i. 💚

In order to make a realistic bounce, the element needs to abide by the squash and stretch animation principle.

This helps make the movement feel more lifelike. The i should squash and stick to the ground at the bottom of the bounce and stretch out at the top. You can definitely achieve this with some really fine tuned keyframes or individual, overlapping tweens. But Greensock make it easier for us with their Custom Bounce plugin.

Using the plugin you set a few parameters and it creates an ease for the bounce and for the squash and stretch.

strength determines how bouncy the ease is and squash determines how long the squash should last.

CustomBounce.create("myBounce", {strength:0.7, squash:3, squashID:"myBounce-squash"});

You can then use that bounce ease the same way you would use a normal ease in a Greensock tween, by referring to it in your tween parameters. The squash ease ID will be whatever the ID of the bounce is plus -squash appended to the end, for example, ease:"myBounce-squash"

tl.to("#ball", duration, {y:550, ease:"myBounce"})

.to("#ball", duration, {scaleY:0.5, scaleX:1.3, ease:"myBounce-squash"}, 0)

See the Pen Video: CustomBounce from GreenSock by Cassie Evans (@cassie-codes) on CodePen.

The final animation permalink

Put all of that together along with a bit of timing finetuning and easing tweaks and we have our final logo animation!

See the Pen Cassie! by Cassie Evans (@cassie-codes) on CodePen.

If you make an SVG path animation I would love to see it! My twitter DM’s are also always open if you get stuck.

Just pop me a message!

css-animation-libraries

There are an awful lot of libraries that want to help you animate things on the web. These aren’t really libraries that help you with the syntax or the technology of animations, but rather are grab-and-use as-is libraries. Want to apply a class like “animate-flip-up” and watch an element, uhhh, flip up? These are the kind of libraries to look at.

I wholeheartedly think you should both 1) learn how to animate things in CSS by learning the syntax yourself and 2) customize animations to tailor the feel to your site. Still, poking around libraries like this helps foster ideas, gets you started with code examples, and might form a foundation for your own projects.

Let’s take a look at the landscape of them. Some libraries have different approaches: only take what you need classes, Sass mixins, light JavaScript libraries for adding/removing classes, etc. But they are all essentially “CSS animation libraries.” (Some of them are kinda funny having “CSS3” in the title, which kinda dates them. People just don’t say that anymore.)

While animations can both be fun and create useful interactions, it’s worth remembering that not all users want them when browsing the web. See Eric Bailey’s “Revisiting prefers-reduced-motion, the reduced motion media query” for information on how to accommodate users who prefer little or no motion.

Animista

You pick an animation you like and it gives you a class name you can use that calls a keyframe animation (you copy and paste both). The point is you just take what you need.

See the Pen


Animista Example
by Chris Coyier (@chriscoyier)


on CodePen.

Animate.css

One of the big original classic CSS animation libraries from Dan Eden.

See the Pen


Animate.css (Part 3)
by Hudson Taylor (@Hudson_Taylor11)


on CodePen.

tachyons-animate

Tachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need. tachyons-animate extends those by adding “Single purpose classes to help you orchestrate CSS animations.” It can be used alone, but even the docs suggest it can be used in combination with other animation libraries since helper classes are generically useful.

See the Pen


tachyons-animate
by Chris Coyier (@chriscoyier)


on CodePen.

Infinite

These animations, like rotations and pulses, that are specifically designed to run and repeat forever.

See the Pen


BgrYZo
by Chris Coyier (@chriscoyier)


on CodePen.

Motion UI

A Sass library for creating flexible CSS transitions and animations.

See the Pen


Motion UI
by Chris Coyier (@chriscoyier)


on CodePen.

micron

a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power

See the Pen


Micron
by Chris Coyier (@chriscoyier)


on CodePen.

Vivify

Vivify is sort of like Animate.css in the sense that it contains a lot of the same types of animations. It does offer plenty of its own as well.

See the Pen


Vivify
by Chris Coyier (@chriscoyier)


on CodePen.

Hover.css

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

See the Pen


Hover.css
by Chris Coyier (@chriscoyier)


on CodePen.

AllAnimationCss3

See the Pen


All Animation
by Chris Coyier (@chriscoyier)


on CodePen.

Magic Animations CSS3

See the Pen


Magic Animations
by Chris Coyier (@chriscoyier)


on CodePen.

It’s Tuesday.

A quirky CSS Animation Library.

See the Pen


Tuesday
by Chris Coyier (@chriscoyier)


on CodePen.

vhs

See the Pen


vhs
by Chris Coyier (@chriscoyier)


on CodePen.

ReboundGen

See the Pen


ReboundGen
by Chris Coyier (@chriscoyier)


on CodePen.

CSShake

See the Pen


CSSShake
by Chris Coyier (@chriscoyier)


on CodePen.

Motion CSS

cssanimation.io

See the Pen


cssanimation.io
by Chris Coyier (@chriscoyier)


on CodePen.

WickedCSS

See the Pen


WickedCSS animations
by Chris Coyier (@chriscoyier)


on CodePen.

Woah.css

See the Pen


Woah.css
by Chris Coyier (@chriscoyier)


on CodePen.

Obnoxious

See the Pen


Obnoxious.css
by Chris Coyier (@chriscoyier)


on CodePen.

Hexa

Mimic.css

See the Pen


mimic.css
by Eric Treacy (@etreacy)


on CodePen.