How to use the gsap.TimelineLite function in gsap

opacity: 0,
          transparent: true,
        });
        const mesh = new Mesh(geom, mat);

        mesh.position.x = this.basePosition;
        this.basePosition += geom.boundingBox.max.x + letterSpacing;
        this.add(mesh);
      }
    });

    this.show = this.show.bind(this);
    this.hide = this.hide.bind(this);

    // Timeline
    this.tm = new TimelineLite({ paused: true });
    this.tm.set({}, {}, `+=${duration * 1.1}`)
    this.children.forEach((letter) => {
      const data = {
        opacity: 0,
        position: -0.5,
      };
      this.tm.to(data, duration, { opacity: 1, position: 0, ease: Back.easeOut.config(2), onUpdate: () => {
        letter.material.opacity = data.opacity;
        letter.position.y = data.position;
        letter.position.z = data.position * 2;
        letter.rotation.x = data.position * 2;
      } }, `-=${duration - 0.03}`);
    });
  }

import { TweenLite, TimelineLite, Bounce } from 'gsap';

// 適当に要素をたくさん用意する
const rects = [];
for (let i = 0; i < 50; i++) {
  const rect = document.createElement('div');
  rect.className = 'rect';
  rect.style.left = `calc(100vw * ${Math.random()})`;
  rect.style.top = `-100px`;
  rect.style.transform = `rotateZ(${Math.random() * 360}deg)`;
  document.body.appendChild(rect);
  rects.push(rect);
}

// タイムラインを作成する
const tl = new TimelineLite({ repeat: -1, yoyo: true });
rects.forEach((rect, index) => {
  // トゥイーンインスタンスを追加する
  tl.add(TweenLite.to(rect, 3, {
    y: window.innerHeight * 3 / 4,
    rotationZ: 0,
    ease: Bounce.easeOut,
    delay: index * 0.02
  }), 0);
});

componentWillMount() {
		// dunno why can't pass element as ref to anim, need get hacky w/ ids
		this.TL = new TimelineLite();
	}
	componentDidUpdate() {

animationTL(currentData) {
    this.tl = new TimelineLite();
    for (var m = 0; m < currentData.length; m++) {
      const el = $(".bar");
      this.tl.to(el[m], 0.3, {
        width: currentData[m].value
      }, "-=0")
      .to($(el[m]).next(), 0.2, {
        opacity: 1,
        width: "auto"
      })
      .to($(el[m]).next().next(), 0.2, {
        opacity: 1,
        display: "inline-block"
      }, "-=0.1")
      .to($(".plus")[m], 0.2, {
        opacity: 1
      })

const Frame = () => {
    const context = useContext(AppContext);

    document.documentElement.className = context.themeMode === 'light' ? 'light' : 'dark';

    let app = useRef(null);
    let headerItems = useRef(null);
    let masterTl = new TimelineLite();

    useEffect(() => {
        TweenMax.to(app, 0, {css: {visibility: 'visible'}});
        if (localStorage.getItem('animated-once') === null) {
            masterTl.from(headerItems.children[0], 1, {opacity: 0, delay: .8, ease: Power3.easeOut}, 'Start master')
                .from(headerItems.children[1], 1, {opacity: 0, delay: .8, ease: Power3.easeOut}, .3)
                .from(headerItems.children[2], 1, {opacity: 0, delay: .8, ease: Power3.easeOut}, .3);

            localStorage.setItem('animated-once', 'true');
        }
    });

    const ScrollToTop = () => {
        const { pathname } = useLocation();

        useEffect(() => {

constructor(font, fontBold) {
    super({ half: true });

    this.add(ACTION_ADD_FIRST_FILE, this.addFirstFile);
    this.add(ACTION_COPY_LAST_FILE, this.copyLastFile);
    this.add(ACTION_LOOP, this.loop);
    this.add(ACTION_ADD_FILENAMES, this.addFileNames);
    this.add(ACTION_ADD_VERSION_DATABASE, this.addVersionDatabase);
    this.add(ACTION_NEXT);

    this.fileLabelFont = font;
    this.fontBold = letterSpacing(fontBold, 1.2);
    this.sectionLabelFont = letterSpacing(font, 1.2);

    this.copyTimeline = new TimelineLite({
      paused: true,
      onComplete() {
        this.restart();
      }
    });

    this.copyTimeline.add(this.copyLastFile, '+=1.5');
  }

get timelineEnter() {
    const t = new TimelineLite();
    const t1 = new TimelineLite();
    const t2 = new TimelineLite();
    const ease = 'Linear.easeNone';
    const circle = this.circles.childNodes;
    const greyCircle = this.secondaryCircles.childNodes;

    t.addLabel('start').set([greyCircle, circle], { autoAlpha: 0, scale: 0.2, y: '-150%', transformOrigin: 'center' });

    t1.addLabel('start')
      .to(circle, 0.3, { autoAlpha: 1, ease }, 'start')
      .to(circle, 0.5, { scale: 1, ease }, 'start')
      .to(circle, 4.5, { y: '0%', ease: 'Power4.easeOut' }, 'start+=0.25')
      .to(circle, 0.25, { scale: 0.85, ease }, 'start+=0.5')
      .to(circle, 0.5, { scale: 1 }, 'start+=0.75');

    t2.addLabel('start')

(function($) {
				let img = $('.wrapper').children(),
					name = $('#name'),
					accountNo = $('#accountNo'),
					details = $('.menu ul>li'),
					logout = $('.logOut');
				let serviceList = [ ...name, ...accountNo, ...details, ...logout ];
				let t1Loader = new TimelineLite({ delay: 0.5 });

				t1Loader
					.staggerFromTo(
						serviceList,
						0.25,
						{ y: +20, autoAlpha: 0 },
						{ y: 0, autoAlpha: 1, ease: Elastic.SlowMo },
						0.15
					)
					.fromTo(img, 0.5, { y: 50, autoAlpha: 0 }, { y: 0, autoAlpha: 1, ease: Elastic.SlowMo }, '-=1.25');
			})(jQuery);
		});

componentDidMount() {
    const tl = new TimelineLite();

    tl
      .to(this.intro.current, 4.5, { opacity: 1, delay: 1 })
      .to(this.intro.current, 1.5, {
        opacity: 0,
        onComplete: () => {
          this.audio.current.play();
        }
      })
      .set(this.logo.current, {
        opacity: 1,
        scale: 2.75,
        delay: 0.5
      })
      .to(this.logo.current, 8, { scale: 0.05, ease: Power2.easeOut })
      .to(this.logo.current, 1.5, { opacity: 0 }, "-=1.5")