baseTransition.ts

import { gsap, Power3 } from 'gsap';

export const baseTransition = (
  elements: HTMLElement | ReadonlyArray<HTMLElement>,
  props?: gsap.AnimationVars,
): gsap.core.Animation =>
  gsap.from(elements, {
    duration: 1.2,
    y: 40,
    ease: Power3.easeOut,
    autoAlpha: 0,
    stagger: 0.1,
    ...props,
  });

example.ts

scrollTransition(this.element, baseTransition(transitionItems));

scrollTransition.ts

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

gsap.registerPlugin(ScrollTrigger);

export const scrollTransition = (
  trigger: HTMLElement,
  animation: gsap.core.Animation,
  props?: Object,
): gsap.plugins.ScrollTriggerInstance =>
  ScrollTrigger.create({
    trigger,
    animation,
    toggleActions: 'play complete none none',
    start: 'top 65%',
    ...props,
  });