LYNRrJY

index.pug

.bg
  canvas#hero-lightpass
  #container
    h1 AirPods Pro
  .container-hero
    div.h1 Active Noise Cancellation for immersive sound.
    div.h1 Transparency mode for hearing what’s happening around you.
    div.h1 A customizable fit for all-day comfort.
    div.h1 Magic like you’ve never heard.

lynrrjy.markdown

LYNRrJY

A Pen by Marius on CodePen.

License.

script.js

gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.saveStyles(".container-hero div")
ScrollTrigger.matchMedia({

  // desktop
  "(min-width: 800px)": function() {
    // setup animations and ScrollTriggers for screens 800px wide or greater (desktop) here...
    // These ScrollTriggers will be reverted/killed when the media query doesn't match anymore.
  },
  // mobile
  "(max-width: 799px)": function() {
    // The ScrollTriggers created inside these functions are segregated and get
    // reverted/killed when the media query doesn't match anymore.
    var targets = document.querySelectorAll(".container-hero div");

    targets.forEach(target => {
      const tl = gsap.timeline({
        defaults: {duration: 1},
        scrollTrigger: {
          trigger: target,
          markers: true,
          scrub: true,
          start: "center 50%",
          end: "bottom -50%",
          pin: true
        }
      })
      .fromTo(target, {y: 25}, {y: -25})
      .from(target, {opacity: 0, duration: 0.2}, 0)
      .to(target, {opacity: 0, duration: 0.2}, 0.8)
    });
  },

  // all
  "all": function() {
    console.clear();

    const canvas = document.getElementById("hero-lightpass");
    const context = canvas.getContext("2d");

    canvas.width = 1158;
    canvas.height = 770;

    const frameCount = 147;
    const currentFrame = index => (
      `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${(index + 1).toString().padStart(4, '0')}.jpg`
    );

    const images = []
    const airpods = {
      frame: 0
    };

    for (let i = 0; i < frameCount; i++) {
      const img = new Image();
      img.src = currentFrame(i);
      images.push(img);
    }

    gsap.to(airpods, {
      frame: frameCount - 1,
      snap: "frame",
      scrollTrigger: {
        scrub: 0.5
      },
      onUpdate: render
    });

    images[0].onload = render;

    function render() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(images[airpods.frame], 0, 0);
    }

    // Timeline for scaling the image when scrolling begins

    var tl = gsap.timeline({
      scrollTrigger: {
        scrub: true
      }
    });

    tl.from("#hero-lightpass", {
      scale: 1.2,
      duration: 1
    }, 0)
    .to("#hero-lightpass", {
      scale: 1,
      duration: 0.25
    }, 0.75)


    // Timeline for fading in and fading out the text

    var targets = document.querySelectorAll(".container-hero div");

    targets.forEach(target => {
      const tl = gsap.timeline({
        defaults: {duration: 1},
        scrollTrigger: {
          trigger: target,
          markers: true,
          scrub: true,
          start: "center 50%",
          end: "bottom top",
          pin: true
        }
      })
      .fromTo(target, {y: 25}, {y: -25})
      .from(target, {opacity: 0, duration: 0.2}, 0)
      .to(target, {opacity: 0, duration: 0.2}, 0.8)
    });
  }

});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/ScrollTrigger.js"></script>

style.scss

@mixin sm-max {
  @media (max-width: #{$dsk-xs}) {
      @content;
  }
}

$dsk-xs: 800px;

@mixin center-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

@import url('https://fonts.google.com/specimen/Exo?selection.family=Exo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900');

html, body {
  font-family: 'Exo', sans-serif;
  font-size: 10px;
  @include sm-max {
    font-size: 5px;
  }
}
*, *:before, *:after {
  box-sizing: inherit;
}

html {
  height: 100vh;
}

body {
  background: #000;
}

.bg {
  height: auto;
  @include sm-max {
  }
}

canvas {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100vw;
  max-height: 100vh;
}

#container {
  @include center-flex;
  width: 100%;
  height: 100vh;
  h1 {
    z-index: 9999;
    color: white;
    font-size: 12rem;
    font-weight: 900;
  }
}

.container-hero {
  height: calc(3770px - 100vh);
  top: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  div.h1 {
    width: 50%;
    @include sm-max {
      width: 90%;
    }
    font-size: 8rem;
    font-weight: 600;
    text-align: center;
    color: white;
  }
}