Free Webflow components / Effect: image split into three on scroll

Webflow scroll effect: one image splits into three

A free scroll effect for Webflow: one image splits into three tilted panels as you scroll. Copy it, press ⌘V in the Designer, and swap the image.

  • Responsive

What you receive in Webflow

  • 12 native elements and 9 classes.
  • Breakpoints: mobile landscape (767px).
  • 2 Embed elements keep the CSS or script that Webflow cannot express. To edit an Embed, you must have a paid Webflow site plan.

How to paste it

  1. Click Copy for Webflow.
  2. Open your page in the Webflow Designer.
  3. Press ⌘V or Ctrl+V.

HTML

<section class="sp">
  <div class="sp-sticky">
    <div class="sp-copy">
      <p class="sp-eyebrow">Scroll</p>
      <h2 class="sp-title">One picture, three angles</h2>
    </div>
    <div class="sp-stage">
      <div class="sp-slice" style="--n:0"></div>
      <div class="sp-slice" style="--n:1"></div>
      <div class="sp-slice" style="--n:2"></div>
    </div>
  </div>
</section>
<style>
.sp { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #0a0a0a; color: #fafafa; height: 220vh; position: relative; }
.sp-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; overflow: hidden; padding: 0 24px; }
.sp-copy { text-align: center; }
.sp-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #a3a3a3; margin: 0 0 12px; }
.sp-title { font-size: 52px; line-height: 1.05; letter-spacing: -0.03em; margin: 0; }
.sp-stage { display: flex; gap: 0; width: min(900px, 90vw); aspect-ratio: 16 / 9; perspective: 1400px; }
.sp-slice { flex: 1; height: 100%; background-image: url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1600&q=80"); background-size: 300% 100%; background-position: calc(var(--n) * 50%) 50%; background-color: #262626; transform: translateX(var(--sx, 0px)) translateZ(var(--sz, 0px)) rotateY(var(--sr, 0deg)); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); will-change: transform; }
.sp-slice:first-child { border-radius: 18px 0 0 18px; }
.sp-slice:last-child { border-radius: 0 18px 18px 0; }
@media (max-width: 767px) { .sp-title { font-size: 34px; } }
</style>
<script>
(function () {
  var reduce = window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches;
  document.querySelectorAll(".sp").forEach(function (sec) {
    var slices = sec.querySelectorAll(".sp-slice");
    if (reduce || slices.length !== 3) return;
    var ticking = false;
    function update() {
      ticking = false;
      var r = sec.getBoundingClientRect(), total = r.height - innerHeight;
      var p = Math.min(1, Math.max(0, -r.top / Math.max(1, total)));
      var k = Math.min(1, p / 0.6), t = k * k * (3 - 2 * k); // splits over the first 60% of the scroll, then stays split
      var gap = 44 * t, turn = 34 * t, depth = -150 * t;
      slices[0].style.setProperty("--sx", -gap + "px"); slices[0].style.setProperty("--sr", turn + "deg"); slices[0].style.setProperty("--sz", depth + "px");
      slices[1].style.setProperty("--sz", (60 * t) + "px");
      slices[2].style.setProperty("--sx", gap + "px"); slices[2].style.setProperty("--sr", -turn + "deg"); slices[2].style.setProperty("--sz", depth + "px");
    }
    window.addEventListener("scroll", function () { if (!ticking) { ticking = true; requestAnimationFrame(update); } }, { passive: true });
    window.addEventListener("resize", update);
    update();
  });
})();
</script>

More examples

Effect: blinds text reveal on scroll

Each line of a heading opens like a window blind as it scrolls into view, and plays again when you scroll back.

Effect: x-ray hover lens

Move over a product picture and a round lens shows a blueprint layer underneath.

Effect: pixelated image load

An image that starts as big pixels and sharpens step by step when it scrolls into view.

See all 47 free Webflow components →

Questions

How do I use my own image?

Change the background image on the sp-slice class once. All three panels use it, and each one shows a different third.

How tall is the section?

It's 220% of the screen height so there's room to scroll the effect: the panels split over the first part and stay split. Lower the height to make it faster.

Is this effect component free?

Yes. Copy it with no account and use it on client sites and your own sites.

Does it work on the free Webflow plan?

Yes. It pastes on every Webflow plan, including Starter. If it includes an Embed element, editing that Embed's code needs a paid site plan.