Parallax Visual Example

visual.hbs

<link rel="stylesheet" href="./visual.scss">
<script src="./Visual.ts"></script>

<div class='visual' data-component="visual">
  <picture>
    <img src='{{src}}' alt='{{alt}}'>
  </picture>
</div>

visual.scss

[data-component="visual"] {
  overflow: hidden;
  position: relative;
  @include aspect-ratio(16, 9);

  picture {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

}

Visual.ts

import { gsap } from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import AbstractComponent from '../AbstractComponent';

gsap.registerPlugin(ScrollTrigger);

export default class Visual extends AbstractComponent {
  public static readonly displayName: string = 'visual';
  private static readonly offset: number = 200;
  private picture: HTMLPictureElement | null = this.getElement('picture');

  constructor(el: HTMLElement) {
    super(el);
    this.createParallaxFX();
  }

  private createParallaxFX = () => {
    if (!this.picture) return;
    const offset = Visual.offset;
    this.picture.style.bottom = `-${offset}px`;

    ScrollTrigger.create({
      trigger: this.picture,
      scrub: 1,
      animation: gsap.to(this.picture, {
        y: -offset,
      })
    })



  };

  public dispose() {
    //
    super.dispose();
  }
}