Troublesome issue encountered when trying to integrate Gsap with TypeScript

Currently, I am working on an application in nuxt.js which utilizes ssr rendering. However, I have encountered a problem with gsap while using typescript. Specifically, when attempting to employ the timeline.staggerTo() method, I receive an error stating that the property staggerTo() does not exist on TimelineMax type.

This is how I am incorporating gsap into my project: I installed it using yarn add gsap then proceeded to import TimelineMax from "gsap"

Although to() functions without any issues, staggerTo and staggerFrom do not work as expected. This could be due to the absence of a definition for these properties. Does anyone know of a possible solution or workaround?

Thank you in advance for your assistance <3

Attached is some sample code:

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)
  }
});

Answer №1

It seems like your GSAP 3 version may not have the latest Typescript declarations. The recent update in version 3.3 has significantly improved these definitions. It's recommended to avoid using the outdated @types declarations. Upgrading your GSAP version and removing the @types declarations should resolve any issues, especially since TimelineMax is now a part of .timeline() in GSAP 3.

At GreenSock, we suggest following the GSAP 3 formatting guidelines. Your code could be structured as follows:

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
      })
  }
});

To learn more about staggers, you can refer to the stagger documentation.

If you're seeking quick assistance, it's advised to reach out to the community in GreenSock forums.

Answer №2

If you want to implement stagger effect, simply include {stagger: 0.1} in either fromVars or toVars

Wishing you a wonderful day :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Understanding the application of JSON data can be simplified by following these

I am looking to manipulate dates by either adding or subtracting them, but I am unsure of how to extract the dates from the other data present. var fetch = require('node-fetch'); fetch('https://api.nasa.gov/planetary/earth/assets?lon=100.7 ...

Animate the transition of the previous element moving downward while simultaneously introducing a new element at the top

I currently have a hidden element called "new element" that is controlled by v-if. My goal is to create a button labeled "display" that, upon clicking, will reveal the new element on top after sliding down an old element. How can I achieve this using CSS ...

timer-based user session expiration

Currently, the app I'm developing has a system where a session is created with a 15-minute expiration time once a user interacts with a form. This session is managed server-side. If the user remains idle for 15 minutes, the server returns a 404 erro ...

Tips on how to indicate a checkbox as selected within an Angular controller

I'm in the process of creating a form for entering new service requests, as well as displaying and editing existing ones. One part of this form includes a list of labeled check-boxes that represent different countries. When an existing request is disp ...

How to Customize Checkbox Appearance in PrimeNG

Seeking to customize the visual appearance of the label for a PrimeNG checkbox element: <div class="ui-g-7"> <p-checkbox name="group1" value="Los Angeles" label="Los Angeles" [(ngModel)]="selectedCities" inputId="la"> </p-checkbox&g ...

Keeping datetimepicker current when a date is chosen - a guide

I am currently utilizing the datetimepicker plugin from xdsoft to enable users to select a booking date and time. Check out the documentation for more details. To manage bookings, I have set up a 'fechas' table in my database which stores inform ...

When a JavaScript/jQuery open window popup triggers the onunload event after the about:blank page has been

Imagine you have a button that triggers a popup using window.open(): <button id = "my-button">Open window</button>​ You also want to detect when this popup window closes. To achieve this, you can use the following code: $('#my-button& ...

What is the best way to use Ajax GET after dropping an item with jQuery, and then append the result of a PartialView

In a webpage, I have <ul id="myPicturesAlbum" > <li id="picture1" data-index-number="image1"></li> <li id="picture2" data-index-number="image2"></li> <li id="picture3" data-index-number="image3"></li> ...

Building a Vuetify footer with perfectly centered content: A step-by-step guide

I currently have a setup where I am using the v-flex with a grid ratio of 2 / 8 / 2. This places my content in the center of the section with a width of 8, but the issue is that this centered content does not match up with the other elements on the website ...

What is the best way to eliminate the border around the <b-dropdown-form> element?

Currently implementing this *{ no outline; no box-shadow; } view image description here ...

jQuery carousel displaying a blank slide at the conclusion

I am experiencing an issue with my slideshow where it shows an empty slide after the last element. I suspect that there is something in my script causing this behavior, as it seems to be finding one extra child for the element and adding it as an empty spa ...

Footer button overrides list components due to improper implementation of vertical ion-scroll

Having some trouble setting up ion-scroll on a specific screen in my mobile application built with Ionic. On the Book page of my app, I'm encountering two main issues: https://i.stack.imgur.com/MnheG.png 1) The placement of the Confirm button doesn& ...

I am not receiving any response from a successful ajax script

I'm facing an issue where I can't seem to retrieve any response from another file using AJAX. The alert message always appears empty. Could this be causing the GET request to not go through? I'm fairly new to programming, so I could really u ...

VueJS - Vuefire - Unexpected Error: document.onSnapshot is not a valid function

I'm currently working on integrating Vuefire into my project. I have been following the instructions provided on the Vuefire website, but I am encountering an error. db.js: import firebase from 'firebase/app' import 'firebase/firestore ...

Oops! Looks like the code encountered an error: Home is not defined in Laravel Vue.js

I am embarking on my journey with Vue and Laravel, aiming to create a seamless single page application. Even though I have set up my router and routes, an error pops up stating that my component is not defined. It's puzzling because I do have a Home c ...

Creating a declaration file for a library's entry point involves outlining the structure and types

I have developed an npm library that is made up of several ES6 modules, which are then consolidated into a single js file. The directory structure looks like this: src main.ts one.ts two.ts three.ts types index.d.ts index.ts The index.ts fil ...

Incorporating JS objects into HTML: A comprehensive guide

Here is a snippet of code from my JavaScript file: var formStr = "<h5>How many books?:</h5><input type='number' id='bookinput' value='' /><input type='button' value='submit' onclick=& ...

Creating an Icosahedron with realistic behavior

I am currently working on creating a d20, which is a dice with 20 sides or an icosahedron. Here is how I have been approaching it: const IcosahedronDice = (props) => { const [ref] = useBox(() => ({ mass: 1, position: [0, 10, 0] })); return ( ...

The utilization of 'ref' with React Styled Components is proving to be ineffective

Using refs in Styled Components has been tricky for me. When I attempt to access them in my class methods as shown below, I encounter the error message: Edit.js:42 Uncaught TypeError: this.....contains is not a function constructor(props) { .... ...

The VoiceOver feature on iOS fails to respond correctly to anchor elements and changes in focus

While I have sought answers to similar questions in the past, such as this one, my mind remains unsettled until I discover a solution: Among all the screen readers I've encountered, VoiceOver on iOS seems to be the only one that struggles with handli ...