Harvard 2025

Agenda


  • Journey

  • APIs

  • AI

  • Questions

1

The process and tool is
important but secondary
to the product.

2

"NIH syndrome" is
great for learning.

3

If you want something
done right…

4

UI fidelity needs to
match hardware fidelity.

Popmotion 1.0

function setColor({ red }) {
  element.style.color = `rgb(${red} 0 0)`
}

const action = newAction()

action.play({
	values: { red: 255 },
	round: true,
	duration: 500,
	onChange: setColour
});

5

"Eliminate the unnecessary
so that the necessary may speak."

~ Hans Hoffman

Popmotion 8.0

const styler = makeStyler(
  document.querySelector("div")
)

tween({
  from: styler.get("color"),
  to: "rgba(255, 0, 0)",
  duration: 500
}).start(styler.set)

Motion

animate(
  element,
  { color: "rgba(255, 0, 0)" },
  { duration: 0.5 }
)

6

Reduce the cost of
implementation.

Pose

const Box = posed.div({
  visible: { opacity: 1 },
  hidden: { opacity: 0 }
})

function Component({ isHidden }) {
  return <Box
    pose={isHidden ? "hidden" : "visible"}
  />
}

Motion

function Component({ isHidden }) {
  return <motion.div
    animate={{ opacity: isHidden ? 0 : 1 }}
  />
}

Motion

2021

2022

2023

2024

2025

12 million

Motion

React Spring

GSAP

Anime.js

7

People buy things.

Motion+

Examples & Tutorials

Components

Studio

8

AI is just another tool.

∞

It's the product,
stupid.

40% off with code


HARVARD26

Thank you

motion.dev
@motiondotdev