GSAP

Параметры анимаций:
xPercent,
yPercent,
x,
y,
clipPath,
opacity,

Специальные параметры:
duration,
ease,
stagger,
clearProps: ‘all’

При разбивке текста по буквам для анимации надо применить font-kerning: none;
В противном случае при сборке текста обратно произойдет горизонтальный скачек.

При разбивке по линиям у вложенных элементов должно быть display: inline-block
В противном случае строку разорвет.

Документация по timeline https://greensock.com/docs/v3/GSAP/gsap.timeline()

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

gsap.registerPlugin(ScrollTrigger);

const timeline = gsap.timeline({
    paused: true,
    defaults: {
        clearProps: 'all',
    },
    onComplete() {

    },
    scrollTrigger: {
        trigger: sectionElement,
        start: 'top 70%',
    },
});

// clipPath to right
timeline.fromTo(element, {
    clipPath: 'polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)',
}, {
    clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
});

// clipPath to left
timeline.fromTo(element, {
    clipPath: 'polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)',
}, {
    clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
});

// clipPath to bottom
timeline.fromTo(element, {
    clipPath: 'polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)',
}, {
    clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
});