Skip to content

Instantly share code, notes, and snippets.

@milsyobtaf

milsyobtaf/animation-card.jsx Secret

Last active September 11, 2025 23:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save milsyobtaf/a3ccec1277a80918dd310b382b8c1df1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save milsyobtaf/a3ccec1277a80918dd310b382b8c1df1 to your computer and use it in GitHub Desktop.
Download ZIP
Motion Documentation - Code Samples for Dustin Younse
Raw
readme.md

Motion Documentation - Code Samples for Dustin Younse

This is a code snippet demonstrating a structure I built to document motion guidelines on our design system website.

The website was built using gatsby.js, the documentation content was held in an mdx file, the animation content was held in a json file, the animation was created in lottie finally and inserted into a custom AnimationCard react component using react-lottie-player.

Images are attached to show the overview of the page as well as an animated portion of the page.

Relevant files, can be found below in the body of the gist

  • motion.mdx: Original page content in mdx format
  • moving-moments.jsx: Custom React component to hold motion examples
  • animation-card.jsx: Lottie based React component to play animation
  • hover.json: Lottie source file for animation

Media to illustrate this work

This is a screenshot of the entire page

motion-fundamentals.png

This is a video of the animation in action

motion-animated.mp4
Raw
animation-card.jsx
import React, { useState } from "react"
import { useTheme } from "@emotion/react" /* eslint-disable-line @indeed/ifl/no-emotion-use-theme */
import { Box } from "@indeed/ifl-components"
import LottieLight from "react-lottie-player/dist/LottiePlayerLight"
const AnimationCard = ({
slug,
heading,
cardHeight = 295,
cardWidth = 277,
}) => {
const [isPaused, setIsPaused] = useState(true)
const theme = useTheme()
return (
<Box
onClick={(e) => {
setIsPaused(!isPaused)
e.target.blur()
}}
onKeyDown={(e) => ["Enter"].includes(e.key) && setIsPaused(!isPaused)}
onMouseLeave={(e) => e.target.blur()}
sx={{
blockSize: cardHeight,
inlineSize: cardWidth,
position: "relative",
bg: "background",
borderRadius: "md",
boxShadow: "medium",
marginBlockEnd: 6,
overflow: "hidden",
transition: `all ${theme.transitions.slow}`,
"&:hover, &:focus-within": {
transform: "scale(1.035) translateY(-1%)",
boxShadow: "high",
},
}}
>
<LottieLight
loop={true}
play={!isPaused}
path={`/json/${slug}.json`}
rendererSettings={{ preserveAspectRatio: "xMidYMid slice" }}
height={277}
width={277}
title={`Click or press Enter to start/stop ${heading} animation`}
style={{
opacity: isPaused ? 0.8 : 1,
transition: `all ${theme.transitions.slow}`,
}}
/>
</Box>
)
}
export default AnimationCard
Raw
hover.json
{
"v": "5.7.1",
"fr": 30,
"ip": 20,
"op": 90,
"w": 950,
"h": 1013,
"nm": "2_Hover",
"ddd": 0,
"assets": [],
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 4,
"nm": "Layer 8",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": { "a": 0, "k": 0, "ix": 10 },
"p": { "a": 0, "k": [667, 680.714, 0], "ix": 2 },
"a": { "a": 0, "k": [192, -2581.036, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"d": 1,
"ty": "el",
"s": { "a": 0, "k": [9.927, 9.927], "ix": 2 },
"p": { "a": 0, "k": [208.036, -2581.036], "ix": 3 },
"nm": "Ellipse Path 1",
"mn": "ADBE Vector Shape - Ellipse",
"hd": false
},
{
"ty": "fl",
"c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
},
{
"ty": "gr",
"it": [
{
"d": 1,
"ty": "el",
"s": { "a": 0, "k": [9.927, 9.927], "ix": 2 },
"p": { "a": 0, "k": [192, -2581.036], "ix": 3 },
"nm": "Ellipse Path 1",
"mn": "ADBE Vector Shape - Ellipse",
"hd": false
},
{
"ty": "fl",
"c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 2",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 2,
"mn": "ADBE Vector Group",
"hd": false
},
{
"ty": "gr",
"it": [
{
"d": 1,
"ty": "el",
"s": { "a": 0, "k": [9.927, 9.927], "ix": 2 },
"p": { "a": 0, "k": [175.964, -2581.036], "ix": 3 },
"nm": "Ellipse Path 1",
"mn": "ADBE Vector Shape - Ellipse",
"hd": false
},
{
"ty": "fl",
"c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 3",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 3,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 150,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 2,
"ty": 4,
"nm": "Layer 7",
"parent": 6,
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": { "a": 0, "k": 0, "ix": 10 },
"p": { "a": 0, "k": [192, -2331.911, 0], "ix": 2 },
"a": { "a": 0, "k": [192, -2581.036, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"d": 1,
"ty": "el",
"s": { "a": 0, "k": [9.927, 9.927], "ix": 2 },
"p": { "a": 0, "k": [208.036, -2581.036], "ix": 3 },
"nm": "Ellipse Path 1",
"mn": "ADBE Vector Shape - Ellipse",
"hd": false
},
{
"ty": "fl",
"c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
},
{
"ty": "gr",
"it": [
{
"d": 1,
"ty": "el",
"s": { "a": 0, "k": [9.927, 9.927], "ix": 2 },
"p": { "a": 0, "k": [192, -2581.036], "ix": 3 },
"nm": "Ellipse Path 1",
"mn": "ADBE Vector Shape - Ellipse",
"hd": false
},
{
"ty": "fl",
"c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 2",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 2,
"mn": "ADBE Vector Group",
"hd": false
},
{
"ty": "gr",
"it": [
{
"d": 1,
"ty": "el",
"s": { "a": 0, "k": [9.927, 9.927], "ix": 2 },
"p": { "a": 0, "k": [175.964, -2581.036], "ix": 3 },
"nm": "Ellipse Path 1",
"mn": "ADBE Vector Shape - Ellipse",
"hd": false
},
{
"ty": "fl",
"c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 3",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 3,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 150,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 3,
"ty": 4,
"nm": "Layer 4",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": { "a": 0, "k": 0, "ix": 10 },
"p": { "a": 0, "k": [667, 182.464, 0], "ix": 2 },
"a": { "a": 0, "k": [192, -2581.036, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"d": 1,
"ty": "el",
"s": { "a": 0, "k": [9.927, 9.927], "ix": 2 },
"p": { "a": 0, "k": [208.036, -2581.036], "ix": 3 },
"nm": "Ellipse Path 1",
"mn": "ADBE Vector Shape - Ellipse",
"hd": false
},
{
"ty": "fl",
"c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
},
{
"ty": "gr",
"it": [
{
"d": 1,
"ty": "el",
"s": { "a": 0, "k": [9.927, 9.927], "ix": 2 },
"p": { "a": 0, "k": [192, -2581.036], "ix": 3 },
"nm": "Ellipse Path 1",
"mn": "ADBE Vector Shape - Ellipse",
"hd": false
},
{
"ty": "fl",
"c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 2",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 2,
"mn": "ADBE Vector Group",
"hd": false
},
{
"ty": "gr",
"it": [
{
"d": 1,
"ty": "el",
"s": { "a": 0, "k": [9.927, 9.927], "ix": 2 },
"p": { "a": 0, "k": [175.964, -2581.036], "ix": 3 },
"nm": "Ellipse Path 1",
"mn": "ADBE Vector Shape - Ellipse",
"hd": false
},
{
"ty": "fl",
"c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 3",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 3,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 150,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 4,
"ty": 4,
"nm": "Layer 5",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": { "a": 0, "k": 0, "ix": 10 },
"p": { "a": 0, "k": [475, 755, 0], "ix": 2 },
"a": { "a": 0, "k": [0, -2008.5, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[-4.418, 0],
[0, 0],
[0, -4.418],
[0, 0],
[4.418, 0],
[0, 0],
[0, 4.418],
[0, 0]
],
"o": [
[0, 0],
[4.418, 0],
[0, 0],
[0, 4.418],
[0, 0],
[-4.418, 0],
[0, 0],
[0, -4.418]
],
"v": [
[-232, -2115],
[232, -2115],
[240, -2107],
[240, -1910],
[232, -1902],
[-232, -1902],
[-240, -1910],
[-240, -2107]
],
"c": true
},
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "fl",
"c": {
"a": 0,
"k": [0.454901960784, 0.380392156863, 0.905882352941, 1],
"ix": 4
},
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 150,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 5,
"ty": 4,
"nm": "Layer 3",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": { "a": 0, "k": 0, "ix": 10 },
"p": { "a": 0, "k": [475, 257, 0], "ix": 2 },
"a": { "a": 0, "k": [0, -2506.5, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[-4.418, 0],
[0, 0],
[0, -4.418],
[0, 0],
[4.418, 0],
[0, 0],
[0, 4.418],
[0, 0]
],
"o": [
[0, 0],
[4.418, 0],
[0, 0],
[0, 4.418],
[0, 0],
[-4.418, 0],
[0, 0],
[0, -4.418]
],
"v": [
[-232, -2613],
[232, -2613],
[240, -2605],
[240, -2408],
[232, -2400],
[-232, -2400],
[-240, -2408],
[-240, -2605]
],
"c": true
},
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "fl",
"c": {
"a": 0,
"k": [0.454901960784, 0.380392156863, 0.905882352941, 1],
"ix": 4
},
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 150,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 6,
"ty": 4,
"nm": "Layer 2",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": { "a": 0, "k": 0, "ix": 10 },
"p": { "a": 0, "k": [475, 506, 0], "ix": 2 },
"a": { "a": 0, "k": [0, -2257.5, 0], "ix": 1 },
"s": {
"a": 1,
"k": [
{
"i": { "x": [0.053, 0.053, 0.667], "y": [1, 1, 1] },
"o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
"t": 30,
"s": [100, 100, 100]
},
{
"i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
"o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
"t": 46,
"s": [115, 115, 100]
},
{
"i": { "x": [0.221, 0.221, 0.667], "y": [1, 1, 1] },
"o": { "x": [0.524, 0.524, 0.333], "y": [0, 0, 0] },
"t": 64,
"s": [115, 115, 100]
},
{ "t": 83, "s": [100, 100, 100] }
],
"ix": 6
}
},
"ao": 0,
"ef": [
{
"ty": 21,
"nm": "Fill",
"np": 9,
"mn": "ADBE Fill",
"ix": 1,
"en": 1,
"ef": [
{
"ty": 10,
"nm": "Fill Mask",
"mn": "ADBE Fill-0001",
"ix": 1,
"v": { "a": 0, "k": 0, "ix": 1 }
},
{
"ty": 7,
"nm": "All Masks",
"mn": "ADBE Fill-0007",
"ix": 2,
"v": { "a": 0, "k": 0, "ix": 2 }
},
{
"ty": 2,
"nm": "Color",
"mn": "ADBE Fill-0002",
"ix": 3,
"v": {
"a": 1,
"k": [
{
"i": { "x": [0.667], "y": [1] },
"o": { "x": [0.333], "y": [0] },
"t": 30,
"s": [0.454901993275, 0.380392193794, 0.905882418156, 1]
},
{
"i": { "x": [0.667], "y": [1] },
"o": { "x": [0.167], "y": [0] },
"t": 46,
"s": [0.886274516582, 0.878431379795, 0.992156863213, 1]
},
{
"i": { "x": [0.667], "y": [1] },
"o": { "x": [0.333], "y": [0] },
"t": 64,
"s": [0.886274516582, 0.878431379795, 0.992156863213, 1]
},
{
"t": 83,
"s": [0.454901993275, 0.380392193794, 0.905882418156, 1]
}
],
"ix": 3
}
},
{
"ty": 7,
"nm": "Invert",
"mn": "ADBE Fill-0006",
"ix": 4,
"v": { "a": 0, "k": 0, "ix": 4 }
},
{
"ty": 0,
"nm": "Horizontal Feather",
"mn": "ADBE Fill-0003",
"ix": 5,
"v": { "a": 0, "k": 0, "ix": 5 }
},
{
"ty": 0,
"nm": "Vertical Feather",
"mn": "ADBE Fill-0004",
"ix": 6,
"v": { "a": 0, "k": 0, "ix": 6 }
},
{
"ty": 0,
"nm": "Opacity",
"mn": "ADBE Fill-0005",
"ix": 7,
"v": { "a": 0, "k": 1, "ix": 7 }
}
]
}
],
"shapes": [
{
"ty": "gr",
"it": [
{
"ind": 0,
"ty": "sh",
"ix": 1,
"ks": {
"a": 0,
"k": {
"i": [
[-4.418, 0],
[0, 0],
[0, -4.418],
[0, 0],
[4.418, 0],
[0, 0],
[0, 4.418],
[0, 0]
],
"o": [
[0, 0],
[4.418, 0],
[0, 0],
[0, 4.418],
[0, 0],
[-4.418, 0],
[0, 0],
[0, -4.418]
],
"v": [
[-232, -2364],
[232, -2364],
[240, -2356],
[240, -2159],
[232, -2151],
[-232, -2151],
[-240, -2159],
[-240, -2356]
],
"c": true
},
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "fl",
"c": {
"a": 0,
"k": [0.858823537827, 0.886274516582, 0.992156863213, 1],
"ix": 4
},
"o": { "a": 0, "k": 100, "ix": 5 },
"r": 1,
"bm": 0,
"nm": "Fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
},
{
"ty": "tr",
"p": { "a": 0, "k": [0, 0], "ix": 2 },
"a": { "a": 0, "k": [0, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100], "ix": 3 },
"r": { "a": 0, "k": 0, "ix": 6 },
"o": { "a": 0, "k": 100, "ix": 7 },
"sk": { "a": 0, "k": 0, "ix": 4 },
"sa": { "a": 0, "k": 0, "ix": 5 },
"nm": "Transform"
}
],
"nm": "Group 1",
"np": 2,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 150,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 7,
"ty": 1,
"nm": "BG",
"sr": 1,
"ks": {
"o": { "a": 0, "k": 100, "ix": 11 },
"r": { "a": 0, "k": 0, "ix": 10 },
"p": { "a": 0, "k": [475, 506.5, 0], "ix": 2 },
"a": { "a": 0, "k": [475, 506.5, 0], "ix": 1 },
"s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
},
"ao": 0,
"ef": [
{
"ty": 5,
"nm": "Gradient Ramp",
"np": 10,
"mn": "ADBE Ramp",
"ix": 1,
"en": 1,
"ef": [
{
"ty": 3,
"nm": "Start of Ramp",
"mn": "ADBE Ramp-0001",
"ix": 1,
"v": { "a": 0, "k": [951, 0], "ix": 1 }
},
{
"ty": 2,
"nm": "Start Color",
"mn": "ADBE Ramp-0002",
"ix": 2,
"v": {
"a": 0,
"k": [0.247058823705, 0.184313729405, 0.607843160629, 1],
"ix": 2
}
},
{
"ty": 3,
"nm": "End of Ramp",
"mn": "ADBE Ramp-0003",
"ix": 3,
"v": { "a": 0, "k": [1, 1013], "ix": 3 }
},
{
"ty": 2,
"nm": "End Color",
"mn": "ADBE Ramp-0004",
"ix": 4,
"v": {
"a": 0,
"k": [0.176470592618, 0.129411771894, 0.450980395079, 1],
"ix": 4
}
},
{
"ty": 7,
"nm": "Ramp Shape",
"mn": "ADBE Ramp-0005",
"ix": 5,
"v": { "a": 0, "k": 1, "ix": 5 }
},
{
"ty": 0,
"nm": "Ramp Scatter",
"mn": "ADBE Ramp-0006",
"ix": 6,
"v": { "a": 0, "k": 0, "ix": 6 }
},
{
"ty": 0,
"nm": "Blend With Original",
"mn": "ADBE Ramp-0007",
"ix": 7,
"v": { "a": 0, "k": 0, "ix": 7 }
},
{ "ty": 6, "nm": "", "mn": "ADBE Ramp-0008", "ix": 8, "v": 0 }
]
}
],
"sw": 950,
"sh": 1013,
"sc": "#342783",
"ip": 0,
"op": 150,
"st": 0,
"bm": 0
}
],
"markers": []
}
Raw
motion.mdx

import CoreStates from "../../../../components/motion/core-states"; import MovingMoments from "../../../../components/motion/moving-moments"; import Timing from "../../../../components/motion/timing"; import Easing from "../../../../components/motion/easing"; import Terminology from "../../../../components/motion/terminology";

Overview

Motion's primary job is to help users navigate our product by adding transitions, emphasis, and feedback. These movements connect the pieces of our product, making it whole and bringing it to life.

Core states

These 3 primary states drive our motion identity. Applying these techniques consistently will create hierarchy, help users interact with our product, and establish our personality.

<CoreStates data={[ { slug: "scale", heading: "Scale", text: "Focus: Draw awareness to a useful feature", }, { slug: "segment", heading: "Segment", text: "Reveal: Create space for more information", }, { slug: "slide", heading: "Slide", text: "Educate: Demonstrate spatial awareness to users", }, ]} />

Moving moments

These are the essential areas where motion happens. We don't use motion just because. Instead, we apply it intentionally in the moments that deserve it.

<MovingMoments data={[ { slug: "moveIn", heading: "Move in", text: "When a user enters a new scene, we want to create a good first impression. This moment sets the tone for what to expect and tells the user how to read the incoming content. Use a fluid movement to make individual components or groups of components appear.", examples: "Pop-up, toasts, alert", }, { slug: "hover", heading: "Hover", text: "This interaction prompts the user, giving them helpful guidance in a way that supports accessibility. Hover states mostly show on the desktop with the use of a cursor. They often anticipate a press interaction.", examples: "List, button, icon, navigation", }, { slug: "press", heading: "Press", text: "This is the moment the user decides to tap something to select it. This relatively short animation gives the user confirmation. It reassures them that we've heard them.", examples: "Dropdown, button, icon, job card", }, { slug: "moveOut", heading: "Move out", text: "The moment when the user dismisses an individual element. The way a component exits the screen or gives way to something else prepares them for what's next. It also keeps their interaction with us going.", examples: "Pop-up, toast, dropdown", }, { slug: "transition", heading: "Transition", text: "Unlike the move in and move out movements, a transition happens when an entire surface shifts in or out of the frame. Larger surface areas require a thoughtful pace. We don't want to jar the user, but we don't want to slow them down, either. Entire page transitions also give users a sense of spatial awareness that will grow familiar as they navigate.", examples: "List, button, icon, navigation", }, ]} />

How to start using motion

Here's a quick framework for applying Motion to your work. Once you know what you want to move, decide on a core state and then apply the proper moment to it.

Table showcasing various examples of what type of motion when

Timing

Timing ranges for our system fall between 100ms and 700ms. Timing can differ due to screen size, so adjust your duration as needed within the range provided.

<Timing data={[ { items: "Button, toggle, small component", time: "100ms to 200ms", }, { items: "Alert, pop-up, toast", time: "250ms to 300ms", }, { items: "Panels, modal reorder", time: "300ms to 400ms", }, { items: "Page transition", time: "500ms to 700ms", }, ]} />

Easing

Also known as a timing function, easing represents the rate of change in speed over a period of time. Easing helps mimic the real world by adding a sense of acceleration and deceleration to UI elements in motion.

Accessibility

Animations can be challenging and even dangerous for users with photosensitive epilepsy, vestibular disorders, visual impairments, and cognitive disorders.

  • Don't make anything flash more than three times a second. Flashing any part of the page above this threshold risks triggering seizures. This can apply to other rapid movements like shaking objects.
  • Avoid nauseating effects like parallax, which can trigger symptoms for those who suffer from vestibular disorders like vertigo.
  • Be mindful of cognitive disorders and do not overwhelm or distract users with too many animations.
  • Add a text alternative as well as controls for assistive technology that let the user to stop, pause, hide, or change the frequency of any moving, blinking, or scrolling information that starts automatically, lasts more than five seconds, or is presented in parallel with other content.

Terminology

<Terminology data={[ { term: "Scale", text: "Changes the size of an element", }, { term: "Slide", text: "Changes the horizontal or vertical position of an element", }, { term: "Rotate", text: "Changes an element's position around a fixed point on the 2D plane", }, { term: "Fade", text: "Changes the opacity of an element", }, { term: "Position", text: "Determines the placement of an element", }, { term: "Segment", text: "Reveals information between or within elements", }, { term: "Choreograph", text: "The way in which elements support and interact with each other", }, { term: "Axis", text: "A decided point on which an element may move or rotate.", }, ]} />

Raw
moving-moments.jsx
import React from "react"
import { Box, Heading, Text } from "@indeed/ifl-components"
import AnimationCard from "./animation-card"
const MomentCard = ({ slug, heading, text, examples }) => (
<Box>
<AnimationCard
slug={slug}
heading={heading}
cardHeight={277}
cardWidth={277}
/>
<Heading level={6}>{heading}</Heading>
<Text as="p">{text}</Text>
<Text as="p">
<strong>Example uses: </strong>
{examples}
</Text>
</Box>
)
const MovingMoments = ({ data }) => {
return (
<Box
sx={{
display: "grid",
gridTemplateColumns: "repeat(2, 1fr)",
gridGap: 8,
marginBlock: 6,
}}
>
{data.map((props) => (
<MomentCard key={props.slug} {...props} />
))}
</Box>
)
}
export default MovingMoments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment