Scroll Driven Animations

Entrances

In & Out

The Technique

Demo uses attr() but you don’t have to

• grab animation from a prop <ul style="--_animation: scale-up">
• wire up some keyframes
• attach them to scrollport intersection view()
• run keyframes for element height on entry

Keyframes look like this:

@keyframes slide-in-from-left {
  from {
    transform: translateX(-100%);
  }
}