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/LYbBoRj

const generateCSS = () => {
  const css = [];
  document.querySelectorAll('section[id]').forEach((section, i) => {
    const id = section.getAttribute('id');

    css.push(`
      @scroll-timeline section-${id}-enter {
        source: auto;
		start: selector(#${id}) end 0;
		end: selector(#${id}) end 1;
        scroll-offsets:
          selector(#${id}) end 0,
          selector(#${id}) end 1
        ;
        time-range: 1s;
      }
      @scroll-timeline section-${id}-leave {
        source: auto;
		start: selector(#${id}) start 1;
		end: selector(#${id}) start 0;
        scroll-offsets:
          selector(#${id}) start 1,
          selector(#${id}) start 0
        ;
        time-range: 1s;
      }
      .section-nav li > a[href="#${id}"] {
	    animation-timeline:
	      section-${id}-enter,
	      section-${id}-leave;
		;
      }   

    `);
  });
  return css.join("\n");
}

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

injectCSS(generateCSS());