Animation patterns

A collection of animation techniques built using CSS or JavaScript with considerations for accessibility and user preferences.

Welcome to our growing collection of animation patterns. These patterns try to demonstrate how you can create engaging animations and interactions while still respecting user's preferences for motion. They also support all modern browsers, so you can use them with confidence.

Split Text - Animated Letters

<h1 split-by="letter" letter-animation="breath">
  animated letters
</h1>

const span = (text, index) => {
  const node = document.createElement('span')

  node.textContent = text
  node.style.setProperty('--index', index)
  
  return node
}

const byLetter = text =>
  [...text].map(span)

const {matches:motionOK} = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
)

if (motionOK) {
  const splitTargets = document.querySelectorAll('[split-by]')

  splitTargets.forEach(node => {
    let nodes = byLetter(node.innerText)

    if (nodes)
      node.firstChild.replaceWith(...nodes)
  })
}

@keyframes breath {
  from {
    animation-timing-function: ease-out;
  }

  to {
    transform: scale(1.25) translateY(-5px) perspective(1px);
    text-shadow: 0 0 40px var(--glow-color);
    animation-timing-function: ease-in-out;
  }
}

@media (prefers-reduced-motion:no-preference) {
  [letter-animation] > span {
    display: inline-block;
    white-space: break-spaces;
  }

  [letter-animation=breath] {
    --glow-color: white;
  }

  [letter-animation=breath]>span {
    animation: breath 1.2s ease calc(var(--index) * 100 * 1ms) infinite alternate;
  }
}

@media (prefers-reduced-motion:no-preference) and (prefers-color-scheme: light) {
  [letter-animation=breath] {
    --glow-color: black;
  }
}

Open demo

This pattern shows how to create infinitely animated letter effects that respect user's motion preferences.

Full article · Video on YouTube · Source on Github

Learn more

Split Text - Animated Words

<p split-by="word" word-animation="trampoline">
  split a paragraph of content 🤘💀
</p>

const span = (text, index) => {
  const node = document.createElement('span')

  node.textContent = text
  node.style.setProperty('--index', index)
  
  return node
}

export const byWord = text =>
  text.split(' ').map(span)

const {matches:motionOK} = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
)

if (motionOK) {
  const splitTargets = document.querySelectorAll('[split-by]')

  splitTargets.forEach(node => {
    let nodes = byWord(node.innerText)

    if (nodes)
      node.firstChild.replaceWith(...nodes)
  })
}

@keyframes trampoline {
  0% {
    transform: translateY(100%);
    animation-timing-function: ease-out
  }

  50% {
    transform: translateY(0);
    animation-timing-function: ease-in
  }
}

@media (prefers-reduced-motion:no-preference) {
  [word-animation] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1ch
  }

  [word-animation=trampoline]>span {
    display: inline-block;
    transform: translateY(100%);
    animation: trampoline 3s ease calc(var(--index) * 150 * 1ms) infinite alternate
  }
}

Open demo

This pattern shows how to create infinitely animated word effects that respect user's motion preferences.

Full article · Video on YouTube · Source on Github

Learn more

Split Text - Hover Letters

<h1 split-by="letter" letter-animation="hover">
  hover-me letters
</h1>

const span = (text, index) => {
  const node = document.createElement('span')

  node.textContent = text
  node.style.setProperty('--index', index)
  
  return node
}

const byLetter = text =>
  [...text].map(span)

const {matches:motionOK} = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
)

if (motionOK) {
  const splitTargets = document.querySelectorAll('[split-by]')

  splitTargets.forEach(node => {
    let nodes = byLetter(node.innerText)

    if (nodes)
      node.firstChild.replaceWith(...nodes)
  })
}

@media (prefers-reduced-motion:no-preference) {
  [letter-animation=hover]:hover>span {
    transform: scale(.75) perspective(1px)
  }

  [letter-animation=hover]>span {
    transition: transform .3s ease;
    cursor: pointer;
    will-change: transform
  }

  [letter-animation=hover]>span:hover {
    transform: scale(1.25) perspective(1px)
  }
}

Open demo

This pattern shows how to create interactive letter effects that respect user's motion preferences.

Full article · Video on YouTube · Source on Github

Learn more

Split Text - Hover Words

<h1 split-by="word" word-animation="hover">
  hover the words
</h1>

const span = (text, index) => {
  const node = document.createElement('span')

  node.textContent = text
  node.style.setProperty('--index', index)
  
  return node
}

export const byWord = text =>
  text.split(' ').map(span)

const {matches:motionOK} = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
)

if (motionOK) {
  const splitTargets = document.querySelectorAll('[split-by]')

  splitTargets.forEach(node => {
    let nodes = byWord(node.innerText)

    if (nodes)
      node.firstChild.replaceWith(...nodes)
  })
}

@media (prefers-reduced-motion:no-preference) {
  [word-animation] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1ch
  }
}

@media (prefers-reduced-motion:no-preference) and (hover) {
  [word-animation=hover] {
    overflow: hidden;
    overflow: clip
  }

  [word-animation=hover]>span {
    transition: transform .3s ease;
    cursor: pointer
  }

  [word-animation=hover]>span:not(:hover) {
    transform: translateY(50%)
  }
}

Open demo

This pattern shows how to create interactive word effects that respect user's motion preferences.

Full article · Video on YouTube · Source on Github

Learn more