Image parallax effect [GSAP]

image-parallax-effect-gsap.markdown

Image parallax effect [GSAP]

A Pen by Denis Gusev on CodePen.

License.

index.html

<section>
  <div class="img">
    <div class="img-container">
      <img src="https://images.unsplash.com/photo-1498598457418-36ef20772bb9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" />
    </div>
  </div>
</section>
<section>
  <div class="img">
    <div class="img-container">
      <img src="https://images.unsplash.com/photo-1535916707207-35f97e715e1c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" />
    </div>
  </div>
</section>
<section>
  <div class="img">
    <div class="img-container">
      <img src="https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" />
    </div>
  </div>
</section>

script.js

gsap.registerPlugin(ScrollTrigger);

const lenis = new Lenis({
  lerp: 0.07
});

lenis.on('scroll', ScrollTrigger.update);

gsap.ticker.add((time)=>{
  lenis.raf(time * 1000)
})

// Images parallax
gsap.utils.toArray('.img-container').forEach(container => {
  const img = container.querySelector('img');

  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: container,
      scrub: true,
      pin: false,
    }
  });

  tl.fromTo(img, {
    yPercent: -20,
    ease: 'none'
  }, {
    yPercent: 20,
    ease: 'none'
  });
});

scripts

<script src="https://cdn.jsdelivr.net/gh/studio-freight/[email protected]/bundled/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>

style.scss

* {
  box-sizing: border-box;
}

html {
  display: block;
  height: auto;
  min-height: 100%;
  width: 100%;
}

body {
  display: block;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow: hidden;
  background-color: #171717;
}


// Smooth scroll
.lenis {
  &.lenis-smooth {
    scroll-behavior: auto;

    [data-lenis-prevent] {
      overscroll-behavior: contain;
    }
  }

  &.lenis-stopped {
    overflow: hidden;
  }

  &.lenis-scrolling iframe {
    pointer-events: none;
  }
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;

  .img {
    position: relative;
    width: min(80vw, 900px);
    padding: 10vw;

    &-container {
      width: 100%;
      padding-top: 80%;
      position: relative;
      overflow: hidden;
      border-radius: 32px;

      img {
        width: auto;
        height: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%) scale(1.4);
        transform-origin: 50% 50%;
      }
    }
  }
}