Generate CSS ScrollTimelines

generate.js

// This little piece of JS was used to generate the scroll-timelines
// used in the demo at https://codepen.io/bramus/pen/wveWXdw

const generateCSS = () => {
  let css = '';
  document.querySelectorAll('.slide').forEach((li, i) => {
    const id = li.getAttribute('id');
	const parentId = li.parentElement.getAttribute('id');

    css = `
      ${css}

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

      #${id} > img {
        animation-timeline: scroll-${id}-in-parent-${parentId};
      }   
    `;
  });
  return css;
}

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

const css = generateCSS();
console.log(css);
injectCSS(generateCSS());