Sticky pinned section on scroll

import { scrollPin } from 'svg-scroll-draw/pin';

// Pin the product image while features scroll past
const pin = scrollPin('#product-image', {
  top:         80,           // 80px below top (under a fixed nav)
  pinDistance: window.innerHeight * 3,
  onEnter:     () => image.classList.add('active'),
  onLeave:     () => image.classList.remove('active'),
  onEnterBack: () => image.classList.add('active'),
  onLeaveBack: () => image.classList.remove('active'),
  onProgress:  (p) => progressBar.style.width = p * 100 + '%',
});

// Animate each feature block as it scrolls in
document.querySelectorAll('.feature').forEach(el =>
  scrollAnimate(el, {
    props: { opacity: [0, 1], transform: ['translateY(32px)', 'translateY(0)'] },
    easing: 'ease-out', once: true,
  })
);

// Recalculate after layout change (accordion, content load)
pin.refresh();
pin.destroy(); // removes pin and restores DOM