Buttery.js

Smooth scroll animations driven by the native ScrollTimeline when the browser has it, or a tiny JavaScript fallback when it doesn't. Alternatively, use Lenis as the scroll-driver.

Scroll down ↓

Bessie the cow riding a rocket

Bessie

Moves diagonally and turns as the section scrolls past, with a quadIn ease. She travels further from the md breakpoint up.

buttery.create({
  elem: section,
  direct: cow,
  from: 'top-bottom',
  to: 'bottom-top',
  props: {
    translate: {
      from: '-25vw 30vh', to: '25vw -50vh', timing: 'quadIn',
      md: { from: '-45vw 40vh', to: '45vw -60vh' }
    },
    rotate: { from: '-10deg', to: '15deg' }
  }
}).start()

Daisy

Uses a via midpoint: she rises, then sinks back down, swaying as she goes.

props: {
  translate: { from: '0 120px', via: '0 -160px', to: '0 60px', timing: 'sineInOut' },
  rotate:    { from: '-6deg', via: '6deg', to: '-4deg', timing: 'sineInOut' }
}
Daisy the cow, startled, tied to a yellow balloon
Gertie the cow floating away under a balloon, seen from behind Lulu the cow hanging from a balloon tied to her tail

Gertie & Lulu

Two layers at different speeds. Lulu, in front, fades in by '50%-40%': when the middle of the section reaches 40% down the viewport.

// front layer opacity
from: 'top-bottom',
to: '50%-40%',
props: { opacity: { from: 0, to: 1 } }