Scroll Driven Animations

Entrances

In & Out

The Technique

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

• grab animation from a <ul scroll-animation="scale-up"> and give it to the <li>'s
• 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%);
  }
}