Generate CSS @scroll-timeline definitions

generate.js

// Code that generates the CSS Scroll-Timelines for https://codepen.io/bramus/pen/xxRZZdK
const generateCSS = () => {
  let css = '';
  document.querySelectorAll('li').forEach((li, i) => {
    const id = li.getAttribute('id');

    css = `
      ${css}

      @scroll-timeline scroll-in-cards-${id} {
        source: selector(#cards);
        orientation: inline;
        start: selector(#${id}) end 0;
        end: selector(#${id}) start 0;
        scroll-offsets:
			selector(#${id}) end 0,
			selector(#${id}) start 0
		;
      }

      /* Adjust the li on scroll (z-index) */
      #${id} {
        animation-timeline: scroll-in-cards-${id};
      }   

      /* Adjust the album cover on scroll (perspective) */
      #${id} > img {
        animation-timeline: scroll-in-cards-${id};
      }   
    `;
  });
  return css;
}

const injectCSS = (css) => {
  const style = document.createElement('style');
  style.innerHTML = css;
  document.head.appendChild(style);
}

console.log(generateCSS());