ScrollTrigger example

baseTransition.ts

export const baseTransition = (transitionItems: ReadonlyArray<HTMLElement>):gsap.core.Animation =>  gsap.from(transitionItems, {
    duration: 1,
    y: 40,
    autoAlpha: 0,
    ease: Expo.easeInOut,
    stagger: 0.25,
  });

CTextBlock.ts

import AbstractBlock from '../AbstractBlock';
import { scrollTransition, baseTransition } from '../../../util/transitions';

export default class CTextBlock extends AbstractBlock {
  public static readonly displayName: string = 'c-text-block';

  constructor(el: HTMLElement) {
    super(el);
    const transition = baseTransition(this.getElements('[data-transition-item]'));
    scrollTransition(el, transition);
  }

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

scrollTransition.ts

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

gsap.registerPlugin(ScrollTrigger);

export const scrollTransition = (
  trigger: HTMLElement,
  animation: gsap.core.Animation,
  props?: gsap.plugins.ScrollTriggerInstanceVars,
): gsap.plugins.ScrollTriggerInstance =>
  ScrollTrigger.create({
    trigger,
    animation,
    ...props,
  });