SCROLL SEQUENCE
by Rehmat (Animated Creativity) - MIT License

1. Pictures:  frames/f-001.jpg, f-002.jpg ... (48 examples are included)
2. Section:   <section data-scroll-sequence="frames/f-###.jpg" data-frames="48"></section>
3. Script:    <script src="sequence.js" defer></script>

### = the frame number. Three # = three digits.

Options on the section:
  data-length="3"        height in screens, bigger = slower
  data-fit="cover"       or contain
  data-smooth="0.18"     1 = follows the scrollbar exactly
  data-start="1"         number of the first file
  data-label="..."       text for screen readers

Texts on top:  <div data-seq-show="0.3-0.55"> ... </div>   visible from 30% to 55% of the scroll

Make frames from a video:
  ffmpeg -i product.mp4 -vf "fps=15,scale=1280:-2" -q:v 5 frames/f-%03d.jpg

Open index.html through a web server or directly in the browser and scroll.

More free kits and custom work: https://animatedcreativity.com/
