javascript - Gsap fungerer ikke korrekt med typescript

Jeg skriver en app i nuxt.js med ssr-rendering. Jeg har et problem med gsap. Jeg bruger typescript, og når jeg prøver at bruge timeline.staggerTo() metoden, får jeg en fejl om, at egenskaben staggerTo() ikke findes på TimelineMax-typen.

Hvordan jeg bruger gsap: Jeg har installeret det med yarn add gsap, og så har jeg importeret TimelineMax fra "gsap"

det er alt

to() virker for eksempel, men staggerTo/from gør ikke. Sandsynligvis er der ingen definition for det. Ved nogen, hvad jeg kan gøre for at fixe/omgå det?

Mange tak for hjælpen <3

noget kode

import Vue from "vue";

import { TweenMax, gsap, TimelineMax } from "gsap";

export default Vue.extend({
  mounted() {
    const timeline = new TimelineMax();
    timeline
      .fromTo(
        ".header__subtitle",
        1,
        { opacity: 0, translateY: -30 },
        { opacity: 1, translateY: 0 }
      )
      .staggerFrom(); //Property 'staggerFrom' does not exist on type 'TimelineMax'.Vetur(2339)
  }
});

Svar #1

Jeg gætter på, at du ikke bruger en version af GSAP 3, der har de nyeste Typescript-deklarationer. Typescript-definitionerne, der følger med GSAP, fik en stor forbedring i version 3.3. Brug ikke @types-deklarationerne, da de er ekstremt gamle og forældede. Jeg tror, at opgradering af din GSAP-version og afinstallation af @types-deklarationerne burde løse dit problem, fordi TimelineMax er en bekvemmelighed for .timeline() i GSAP 3.

Med det sagt anbefaler vi hos GreenSock, at du bruger GSAP 3-formattering. Jeg ville formatere din kode således:

import Vue from "vue";

import { gsap } from "gsap";

export default Vue.extend({
  mounted() {
    const timeline = gsap.timeline()
      .fromTo(".header__subtitle", {
        opacity: 0,
        translateY: -30
      }, {
        duration: 1, 
        opacity: 1, 
        translateY: 0,
        stagger: 0.2
      })
  }
});

For mere information om stagger, se stagger-dokumentationen.

Til orientering er du mere tilbøjelig til at få et hurtigere svar på GreenSock-forummerne.

Svar #2

Okay, så for at skabe stagger skal du bare tilføje {stagger: 0.1} i fromVars/toVars

hav en god dag :)

Relaterede artikler