Scroll-Driven Animations Outdated Article/Demo Notice

article.html

<p>UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite since writing this post. The spec also got renamed to Scroll-Driven Animations. This post details an older version of the syntax and has not been updated to reflect these changes.</p>

<p>To learn more about the new syntax, visit <a href="https://scroll-driven-animations.style/" target="_top">https://scroll-driven-animations.style/</a>.</p>

article.md

UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite since writing this post. The spec also got renamed to Scroll-Driven Animations. This post details an older version of the syntax and has not been updated to reflect these changes.

To learn more about the new syntax, visit https://scroll-driven-animations.style/

demo-inline.js

// Add this to your demo in a regular script tag.
// If you don’t have an updated version of your demo, set `url` (line 5) to false.
// In that case, a link to the article on DCC will be shown.
window.addEventListener('DOMContentLoaded', () => {
  const url = 'https://example.com/demo/v2/';
  const $dialog = document.createElement('dialog');
  $dialog.classList.add('sda_update');
  $dialog.innerHTML = `
    <p class="sda_update-title">This demo uses an older syntax and is not up-to-date</p>
    <p>The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite since creating this demo. The spec also got renamed to Scroll-Driven Animations. This demo uses an older version of the syntax and has not been updated to reflect these changes.</p>
    ${url ? `<p>👉 For an updated version of this demo,<br>check out <a href="${url}" target="_top">${url}</a>.</p>` : `<p>To learn more about the new syntax,<br>visit <a href="https://scroll-driven-animations.style/" target="_top">https://scroll-driven-animations.style/</a>.</p>`}
    <form method="dialog"><button>close</button></form>
    <style>dialog.sda_update:modal {
        max-width: 90vw; max-height: 90vh; overflow-y: auto;
        background: white; color: black;
        font-size: 1.2rem; line-height: 1.1; text-align: center; font-weight: 400;
        display: flex; flex-direction: column; gap: 2rem;
        padding: 4rem 6rem 3rem; margin: auto;
        box-sizing: border-box;
        font-family: sans-serif;
    }
    dialog.sda_update * { all: revert; margin: 0 auto; padding: 0; max-width: 60ch; }
    dialog.sda_update .sda_update-title { font-family: serif; font-weight: 700; font-size: 1.4rem; }
    dialog.sda_update::backdrop { background: rgb(0 0 0 / 0.6); }
    </style>
  `;
  document.body.append($dialog);
  $dialog.showModal();
});

demo-module.js

// Add this to your demo in a module script tag.
// If no URL is passed into showDialog, a link to the article on DCC will be shown.
import { showDialog } from 'https://codepen.io/bramus/pen/ZEqMOLz/cccfe67c2b9cdfbeb5fb59083dbd0a64.js';
showDialog('https://example.com/demo/v2/');

Hi {NAME}!

I noticed that some time ago you have create a demo and/or article that uses Scroll-Driven Animations located at {URL}. Awesome! Unfortunately, since creating your content, the specification has undergone a major rewrite, rendering your content out of date.

If possible, could you update the content to use the latest syntax? It works fine in Chrome 115 and up. You can find all details on this new syntax in the article over at https://developer.chrome.com/articles/scroll-driven-animations/ and at https://scroll-driven-animations.style/

Should you not have time to do so, I would recommend you to add a little warning box to your content. To make thing easy for you, I’ve prepared some things that you can easily copy and paste:

• A blob of HTML to inject into your content
• A blob of MD to inject into your content
• A JavaScript script that you can add to your content inside a <script> tag
• A JavaScript module that you can import and call (recommended)

Would you be so kind to update your content? You can use one of the options above or write your own dialog – whatever works for you. That way, curious developers can immediately start learning the new syntax :)

Should you have any questions about this updated syntax, feel free to reach out to me on socials or via e-mail.

Cheers,
Bramus.