npm gsap & react

[UXFreunde]

Hello guys, 

 

i have a question on my react project. i have the gsap-bonus and try to do a simple stagger animation based on the npm imports. 

I always get this message 'staggerFrom' does not exist on type and I have no clue what could be wrong.
Did i miss something with the imports?

Cheers!

 

import React, { Component, Ref } from "react";
import { gsap, TweenMax, SplitText } from "../assets/gsap/all";

gsap.registerPlugin(SplitText);

type SectionProbs = {
  slideEvents: {
    direction: string;
    origin: any;
    destination: any;
  };
};

export class Intro extends Component<SectionProbs> {
  componentDidMount() {
    var text = document.getElementById("text");
    const splitLines = new SplitText(text, {
      type: "lines",
      linesClass: "line line++",
    });

    const elements = document.querySelectorAll(".line");
    [].forEach.call(elements, (el: HTMLElement) => {
      this.wrap(el);
    });

    TweenMax.staggerFrom(
      splitLines.lines,
      0.75,
      {
        y: "200%",
        ease: (window as any).Power1.easeOut,
      },
      0.25
      // splitRevert
    );
    function splitRevert() {
      $("#split-me .line").unwrap();
      splitLines.revert();
    }
  }

 

[ZachSaucier]

Hey UXFreunde and welcome to the GreenSock forums. 

staggerFrom is from version 1-2 of GSAP and isn't valid in GSAP 3. See the migration guide for full details.

See also the stagger documentation: https://greensock.com/docs/v3/Staggers

[UXFreunde]

Thank you! i really missed that  in the docs. Thank you for the hint.