{
  "$type": "site.standard.document",
  "description": "How to combine page load keyframe animation that blends seamlessly with a scroll driven animation.",
  "path": "/combining-onload-keyframes-with-scroll-driven-animation",
  "publishedAt": "2024-11-07T20:22:11.445Z",
  "site": "at://did:plc:jnj7wcwuvspxdsipmecmx7rs/site.standard.publication/self",
  "tags": [
    "blog",
    "css"
  ],
  "textContent": "I want a page load animation that seamlessly combines with a scroll driven animation. I went through multiple versions to find the solution; but you dear reader, you don't have to suffer that. Here's the desired result, a slow scale up animation on page load that a scroll driven animation can seamlessly modify during scroll: Try the solution: See the Pen by Adam Argyle ( @argyleink ) on CodePen . The Problem # Page load animation = a time based animation ( TBA ). Scroll animation = a scroll driven animation ( SDA ). These compete to progress an animation AND in this case to modify the same scale property. They compete unless… The Solution # The element has both keyframe animations assigned, but one is listed first and the TBA only specifies the from keyframes . h1 { animation : spin linear both , enter 5 s ease ; } Next, we change only one of the keyframe animations to SDA : h1 { animation : spin linear both , enter 5 s ease ; animation-timeline : scroll( ), auto ; 👈 } The SDA is listed first for a lesser composite order than the TBA . Then animation-timeline follows this order and specifies the first set of keyframes should be driven by scroll() and the other auto . Woh right? With that in place, here's trick #2: The TBA should only specify where it should animate from , while the SDA should only specify where to . @keyframes enter { from { scale : 0.01 ; } } @keyframes spin { to { scale : 0.01 ; } } Now, the slow playing scale-in page load TBA can run while the SDA can blend with it on scroll. Victory.",
  "title": "A keyframe combo trick"
}