[{"data":1,"prerenderedAt":209},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-better-transitions-with-scroll-driven-animations-i18n-slugs":134,"language-blog-slug-en-better-transitions-with-scroll-driven-animations":141},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135,138],{"locale":136,"value":137},"en","better-transitions-with-scroll-driven-animations",{"locale":139,"value":140},"nl","gebruik-scroll-gedreven-animaties-voor-betere-transities",{"page":142},{"slug":137,"i18nSlugs":143,"social":146,"title":147,"subtitle":79,"isArchived":151,"headerIllustration":152,"date":157,"authors":158,"introTitle":167,"items":168,"pivots":205,"relatedBlogPosts":206,"tags":207,"onMountedScript":208,"onUnmountedScript":172},[144,145],{"locale":136,"value":137},{"locale":139,"value":140},{"title":147,"description":148,"image":149},"Using scroll-driven animations for better transitions","CSS scroll-driven animations can be used to great effect instead of the transition definition.",{"url":150},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724412268-linkedin-blog-11.jpg",false,{"url":153,"alt":154,"width":155,"height":156},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724401982-filmstrip.svg",null,688,542,"2025-01-10T13:42:00.261+01:00",[159],{"name":160,"lastName":161,"slug":162,"image":163},"Jurgen","Beliën","jurgen",{"url":164,"alt":160,"width":165,"height":166},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1721036030-jurgen-edit.jpg",2341,3069,"The new CSS scroll-driven animations API allows for more intricate and interactive transitions.",[169,174,178,182,185,190,193,196,199,202],{"__typename":170,"id":171,"title":172,"body":173},"TextSectionRecord","HUtaf8omS0-hSaBp551ZAQ","","\u003Cp>\u003Cspan style=\"font-weight: 400;\">CSS scroll-driven animations are a new way of declaring animations that are not chronological. Instead of declaring a specific duration, you use a function that maps a position to a specific frame in the animation. This makes it easier to add scroll-driven animations such as the parallax effect. But it can also make other transitions easier to apply, even when the direct relation between animation position and user interaction is not required.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":170,"id":175,"title":176,"body":177},"A92gyzKeRTSUB4QIT6bO2A","Transitions vs Animations","\u003Cp>\u003Cspan style=\"font-weight: 400;\">When working with interactive elements, we often think of them as having different states, and animations tend to be transitions from one state to another. Not surprisingly, these are commonly made by adding the CSS \u003Ccode>transition\u003C\u002Fcode> property on the default state. Contrast this with actual animations, defined with \u003Ccode>@keyframes\u003C\u002Fcode>, where there is a default state and an animation from one to several defined states over a certain duration. With the new properties the timeline is a function of user interaction. The timeline is in essence mapped onto the interaction: for \u003Ccode>scroll()\u003C\u002Fcode>, the first frame would correspond to the start scroll position and the last frame would correspond to the final scroll position. For \u003Ccode>view()\u003C\u002Fcode>, they are mapped on the visibility of the element, where the first keyframe is the start of the visibility of the element, and the last keyframe is when the the element's opposite edge moves out of the containing scrolling element.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":170,"id":179,"title":180,"body":181},"ZpXCGnhhR8CRS2-Jear0eA","Example: A scrollable slideshow","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Consider a horizontal list of images where all the images except for the image that is in view are grayscale. Without the scroll-driven animations, you could say that slides have either an active or an inactive state, the former being full-color, and the latter being grayscale. When a slide is fully visible, its state should be active, otherwise, it should be inactive. From here, the straightforward solution would be to create two classes, and add an \u003Ccode>IntersectionObserver\u003C\u002Fcode> with a callback that switches classes the moment a slide enters or exits the frame. Try scrolling horizontally in the following example:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cfigure>\u003Cexample-intersection-observer-kvppleqg style=\"display: block; max-width: 100%; aspect-ratio: 1.4; background-repeat: no-repeat; background-position: top center; background-size: contain; background-image: url('https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724404161-2024-voorhoede-browser.svg');\">\n\u003Cp slot=\"unsupported\" class=\"example__unsupported\" style=\"padding: 20% 5% 0%; text-align: center;\">Sorry, your browser does not support the technology in this demo\u003C\u002Fp>\n\u003Cspan class=\"example__slide\" hidden=\"\"> \u003Cimg src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724404160-2024-voorhoede-slide-cross.svg\" \u002F> \u003C\u002Fspan> \u003Cspan class=\"example__slide\" hidden=\"\"> \u003Cimg src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724404160-2024-voorhoede-slide-cross.svg\" \u002F> \u003C\u002Fspan> \u003Cspan class=\"example__slide\" hidden=\"\"> \u003Cimg src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724404160-2024-voorhoede-slide-cross.svg\" \u002F> \u003C\u002Fspan> \u003C\u002Fexample-intersection-observer-kvppleqg>\u003C\u002Ffigure>",{"__typename":170,"id":183,"title":172,"body":184},"Jbtq6SG6Sji6ASSvXq0JUw","\u003Cp>Now consider the same behavior with scroll-driven animation with \u003Ccode>animation-timeline: view()\u003C\u002Fcode>. Instead of two states, you could view a slide as having an animation, starting when the slide enters the viewport and ending when the slide exits the frame. This means that the middle of the animation would be the moment where the slide is in the center of the frame, the implicit active state.\u003C\u002Fp>\n\u003Cp>This becomes clearer if we create two distinct animations with a shared duration, one named \u003Ccode>move\u003C\u002Fcode> and one named \u003Ccode>highlight\u003C\u002Fcode>. We can use the former to mimic the scroll behavior, and have the latter do the transition:\u003C\u002Fp>\n\u003Cfigure>\u003Cexample-highlight-animation-kvppleqg style=\"display: block; max-width: 100%; aspect-ratio: 1.4; background-repeat: no-repeat; background-position: top center; background-size: contain; background-image: url('https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724404161-2024-voorhoede-browser.svg');\">\n\u003Cp slot=\"unsupported\" class=\"example__unsupported\" style=\"padding: 20% 5% 0%; text-align: center;\">Sorry, your browser does not support the technology in this demo\u003C\u002Fp>\n\u003Cspan class=\"example__slide\" hidden=\"\"> \u003Cimg src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724404160-2024-voorhoede-slide-cross.svg\" \u002F> \u003C\u002Fspan> \u003C\u002Fexample-highlight-animation-kvppleqg>\u003C\u002Ffigure>",{"__typename":186,"id":187,"language":188,"body":189},"CodeBlockRecord","fcrANEbISlemtVBcmkJo4g","css",".example__slide {\n  animation-name:  move, highlight;\n  animation-duration: 5s;\n  animation-iteration-count: infinite;\n  animation-timing-function: ease-in-out;\n  animation-diretion: alternate;\n}\n\n@keyframes move {\n  0% {\n    transform: translateX(130%);\n  }\n  100% {\n    transform: translateX(-110%);\n  }\n}\n\n@keyframes highlight {\n  0% {\n    background-color: transparent;\n  }\n  50% {\n    background-color: blue;\n  }\n  100% {\n    background-color: transparent;\n  }\n}\n",{"__typename":170,"id":191,"title":172,"body":192},"TQSs64NGQZS1wRneZHVTXA","\u003Cp>Now instead of viewing this animation as a function of time, consider it as a function of the scroll position of the container, and consequently a function of the position of the slide. This means we can remove the \u003Ccode>move\u003C\u002Fcode> animation, and specify the \u003Ccode>animation-timeline\u003C\u002Fcode> as a function of the view. If you're in a Chromium-based browser, you can horizontally scroll the following example to see it in action:\u003C\u002Fp>\n\u003Cfigure>\u003Cexample-scroll-animation-kvppleqg style=\"display: block; max-width: 100%; aspect-ratio: 1.4; background-repeat: no-repeat; background-position: top center; background-size: contain; background-image: url('https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724404161-2024-voorhoede-browser.svg');\">\n\u003Cp slot=\"unsupported\" class=\"example__unsupported\" style=\"padding: 20% 5% 0%; text-align: center;\">Sorry, your browser does not support the technology in this demo\u003C\u002Fp>\n\u003Cspan class=\"example__slide\" hidden=\"\"> \u003Cimg src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724404160-2024-voorhoede-slide-cross.svg\" \u002F> \u003C\u002Fspan> \u003Cspan class=\"example__slide\" hidden=\"\"> \u003Cimg src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724404160-2024-voorhoede-slide-cross.svg\" \u002F> \u003C\u002Fspan> \u003Cspan class=\"example__slide\" hidden=\"\"> \u003Cimg src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724404160-2024-voorhoede-slide-cross.svg\" \u002F> \u003C\u002Fspan> \u003C\u002Fexample-scroll-animation-kvppleqg>\u003C\u002Ffigure>",{"__typename":186,"id":194,"language":188,"body":195},"AKm-ywzLSUmqFsMCa2FzNw",".example__slide {\n  animation-timeline: view(x);\n  animation-name: highlight;\n}\n",{"__typename":170,"id":197,"title":172,"body":198},"GzNQLOxISj6ZPFfbYYQi3w","\u003Cp>Further tweaks can be made by specifying different offsets for where the \u003Ccode>animation-timeline\u003C\u002Fcode> should start or end, so that the apex of falls on the resting point of the slide. In the following example the offsets for all slides make sure the triggering viewbox has an inset, so that partially visible slides will only start the animation when they cross the inset boundary. An exception for the first child is needed to shift the left side of the viewbox to align it to the visible side of the container.\u003C\u002Fp>\n\u003Cfigure>\u003Cexample-scroll-animation-2-kvppleqg style=\"display: block; max-width: 100%; aspect-ratio: 1.4; background-repeat: no-repeat; background-position: top center; background-size: contain; background-image: url('https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724404161-2024-voorhoede-browser.svg');\">\n\u003Cp slot=\"unsupported\" class=\"example__unsupported\" style=\"padding: 20% 5% 0%; text-align: center;\">Sorry, your browser does not support the technology in this demo\u003C\u002Fp>\n\u003Cspan class=\"example__slide\" hidden=\"\"> \u003Cimg src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724404160-2024-voorhoede-slide-cross.svg\" \u002F> \u003C\u002Fspan> \u003Cspan class=\"example__slide\" hidden=\"\"> \u003Cimg src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724404160-2024-voorhoede-slide-cross.svg\" \u002F> \u003C\u002Fspan> \u003Cspan class=\"example__slide\" hidden=\"\"> \u003Cimg src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1724404160-2024-voorhoede-slide-cross.svg\" \u002F> \u003C\u002Fspan> \u003C\u002Fexample-scroll-animation-2-kvppleqg>\u003C\u002Ffigure>",{"__typename":186,"id":200,"language":188,"body":201},"PtVSBjglTe2RTW8VFqvTBQ",".example__slide:first-child {\n  animation-timeline: view(x 0 var(--offset));\n}  \n.example__slide:last-child {\n  animation-timeline: view(x var(--offset) 0);\n}\n",{"__typename":170,"id":203,"title":172,"body":204},"Gn1J2mdKTdyr0tBdxzb0Ag","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Even though this behavior might not need to be tied to scroll interaction, doing so results in a more succinct implementation, allows for more intricate, multi-step animations as transitions. And not to forget, with the added benefit of working without Javascript! For now, this is only supported in Chromium-based browsers, but support for Firefox and Safari is coming.\u003C\u002Fspan>\u003C\u002Fp>",[],[],[],"const css = `\n        :host {\n          --slide-width: 80%;\n          --background-inset: 1%;\n          padding-top: 15%;\n          z-index: 10;\n        }\n        .example__frame {\n          display: flex;\n          overflow-x: scroll;\n          scroll-snap-type: x mandatory;\n          scroll-behavior: smooth;\n          box-sizing: border-box;\n          margin-bottom: 1rem;\n          padding: 0 5%;\n        }\n        .example__slide {\n          display: block;\n          scroll-snap-align: center;\n          flex-shrink: 0;\n          width: var(--slide-width);\n          margin-bottom: calc((100% - var(--slide-width))\u002F2);\n          transition: background-color .25s;\n          background-clip: content-box;\n          line-height: 0;\n          padding: var(--background-inset);\n          z-index: 0;\n          background-color: transparent;\n          border-radius: 4px;\n          overflow: hidden;\n        }\n        .example__slide img {\n          margin: calc(var(--background-inset) * -1);\n          margin-bottom: calc(var(--background-inset-bottom) * -1);\n          width: calc(100% + var(--background-inset) * 2);\n          height: auto;\n        }\n        .example__slide.active {\n          background-color: blue;\n        }\n      `;\n\nconst moveKeyframes = `\n        @keyframes move {\n          0% {\n            transform: translateX(130%);\n          }\n          100% {\n            transform: translateX(-110%);\n          }\n        }\n      `;\n\nconst highlightKeyframes = `\n        @keyframes highlight {\n          0% {\n            background-color: transparent;\n          }\n          50% {\n\n          background-color: blue;\n          }\n          100% {\n            background-color: transparent;\n          }\n        }\n      `;\n\nclass ExampleKvppleqg extends HTMLElement {\n  constructor(styles = \"\") {\n    super();\n\n    const shadowRoot = this.attachShadow({\n      mode: \"open\",\n    });\n\n    shadowRoot.innerHTML = `\n            \u003Cstyle>${css}${styles}\u003C\u002Fstyle>\n            \u003Cslot name=\"unsupported\">\u003C\u002Fslot>\n            \u003Cslot hidden>\u003C\u002Fslot>\n            \u003Cdiv class=\"example__frame\">\n              \u003C!-- will copy slot content here -->\n            \u003C\u002Fdiv>\n          `;\n  }\n\n  connectedCallback() {\n    this.unsupported = this.shadowRoot.querySelector(\"slot[name=unsupported]\");\n    this.enhance();\n  }\n\n  enhance() {\n    const slotContent = this.shadowRoot\n      .querySelector(\"slot:not([name])\")\n      .assignedNodes();\n    const frame = this.shadowRoot.querySelector(\".example__frame\");\n\n    slotContent.forEach((content) => {\n      content.removeAttribute?.(\"hidden\", \"\");\n      frame.append(content);\n    });\n    this.hideUnsupported();\n    console.log(`${this.localName} enhanced`);\n  }\n\n  hideUnsupported() {\n    this.unsupported.setAttribute(\"hidden\", \"\");\n  }\n\n  showUnsupported() {\n    this.unsupported.removeAttribute(\"hidden\");\n  }\n\n  disconnectedCallback() {}\n}\n\nclass ExampleIntersectionObserverKvppleqg extends ExampleKvppleqg {\n  constructor() {\n    super();\n    this.observer = ('IntersectionObserver' in window)\n      ? new IntersectionObserver(this.handleIntersect, {\n        root: this.shadowRoot.querySelector(\".example__frame\"),\n        threshold: 1,\n      })\n      : undefined;\n  }\n  connectedCallback() {\n    if (this.observer) {\n      super.connectedCallback();\n      for (const slide of this.shadowRoot.querySelectorAll(\".example__slide\")) {\n        this.observer.observe(slide);\n      }\n    }\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.observer?.disconnect();\n  }\n  handleIntersect(entries) {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add(\"active\");\n      } else {\n        entry.target.classList.remove(\"active\");\n      }\n    });\n  }\n}\n\nif (!customElements.get(\"example-intersection-observer-kvppleqg\")) {\n  customElements.define(\n    \"example-intersection-observer-kvppleqg\",\n    ExampleIntersectionObserverKvppleqg,\n  );\n}\n\nclass ExampleHighlightAnimationKvppleqg extends ExampleKvppleqg {\n  constructor() {\n    super(`\n            .example__frame {\n              overflow-x: hidden;\n              scroll-snap-type: none;\n            }\n            .example__slide {\n              scroll-snap-align: none;\n              animation-name: move, highlight;\n              animation-duration: 5s;\n              animation-iteration-count: infinite;\n              animation-timing-function: ease-in-out;\n              animation-direction: alternate;\n            }\n            ${moveKeyframes}\n            ${highlightKeyframes}\n          `);\n  }\n}\n\nif (!customElements.get(\"example-highlight-animation-kvppleqg\")) {\n  customElements.define(\n    \"example-highlight-animation-kvppleqg\",\n    ExampleHighlightAnimationKvppleqg,\n  );\n}\n\nclass ExampleScrollAnimationKvppleqg extends ExampleKvppleqg {\n  constructor() {\n    super(`\n            .example__slide {\n              animation-name: highlight;\n              animation-timeline: view(x);\n            }\n            ${highlightKeyframes}\n          `);\n  }\n  connectedCallback() {\n    if (window.CSS.supports('animation-timeline', 'view(x)')) {\n      super.connectedCallback();\n    }\n  }\n}\n\nif (!customElements.get(\"example-scroll-animation-kvppleqg\")) {\n  customElements.define(\n    \"example-scroll-animation-kvppleqg\",\n    ExampleScrollAnimationKvppleqg,\n  );\n}\n\nclass ExampleScrollAnimation2Kvppleqg extends ExampleKvppleqg {\n  constructor() {\n    super(`\n            .example__slide {\n              --slide-width: 80%;\n              --animation-margin: calc(100% - var(--slide-width));\n              animation-name: highlight;\n              \u002F* animation starts ands ends 20% from left and right edge *\u002F\n              animation-timeline: view(x var(--animation-margin));\n            }\n\n            .example__slide:first-child:not(:last-child) {\n              \u002F* animation starts and ends at the left edge *\u002F\n              animation-timeline: view(x 0 var(--animation-margin));\n            }\n\n            ${highlightKeyframes}\n          `);\n  }\n  \n  connectedCallback() {\n    if (window.CSS.supports('animation-timeline', 'view(x)')) {\n      super.connectedCallback();\n    }\n  }\n}\n\nif (!customElements.get(\"example-scroll-animation-2-kvppleqg\")) {\n  customElements.define(\n    \"example-scroll-animation-2-kvppleqg\",\n    ExampleScrollAnimation2Kvppleqg,\n  );\n}\n",1776256139056]