Feature list cascade on scroll

import { scrollAnimate } from 'svg-scroll-draw';

// Each row has its own trigger offset — a 5% stagger
// in start position creates a natural waterfall effect.
const rows = document.querySelectorAll('.feature-row');

rows.forEach((row, i) => {
  scrollAnimate(row, {
    props: {
      opacity:   [0, 1],
      transform: ['translateX(-20px)', 'translateX(0)'],
    },
    trigger: {
      start: `top ${90 - i * 5}%`,
      end:   `top ${60 - i * 5}%`,
    },
    easing: 'ease-out',
    once:   true,
  });
});

// Or use scrollText with split: 'lines' for text blocks:
// scrollText('#features', {
//   split: 'lines', stagger: 0.08,
//   from: { opacity: 0, x: -20 },
//   once: true,
// });