`<tosi-interpolator>`

Declarative CSS-property interpolation between scroll waypoints. Wrap any element, add <tosi-waypoint progress="…" style="…"> children, and each style property is blended (numbers per-number, colours via color-mix) as the enclosing <tosi-product-section>'s pin progress runs 0 → 1.

The panel below is a live <tosi-interpolator> — scroll it, then read its markup in Source view (top-right). No JavaScript; it is the HTML shown here.

Scroll me

Attributes

<tosi-interpolator>

easing — "ease-in-out" applies easeInOutQuad between waypoints (default: linear).
data-scroll-range="start,end" — scope this interpolator to a sub-range of its section's progress, so several can stage in sequence.

<tosi-waypoint>

progress — 0 → 1 keyframe position.
style — the CSS to interpolate toward at that progress.

Editable example

<tosi-product>
  <tosi-product-section scroll="150">
    <tosi-interpolator data-scroll-animate easing="ease-in-out">
      <tosi-waypoint progress="0" style="opacity:0; transform: translateX(-80px)"></tosi-waypoint>
      <tosi-waypoint progress="1" style="opacity:1; transform: translateX(0)"></tosi-waypoint>
      <h1>Edit me</h1>
    </tosi-interpolator>
  </tosi-product-section>
</tosi-product>

See also <tosi-product> and <tosi-filmstrip>.