Search the Community

I am working with typescript and I'm using ScrollTrigger revert eventListener, but I get a typescript error : Argument of type '"revert"' is not assignable to parameter of type '"scrollStart" | "scrollEnd" | "refreshInit" | "refresh" | "matchMedia"'. Has revert been removed from the list of event listeners for scroll trigger?

Hi, guyz I am Nadeem I am running into error that my svg is not actually morphing . Can anyone help me with this ....

We seek a talented GSAP expert to join our team on a 1-month full-time contract. The ideal candidate will develop and maintain a 🎨 Design Editor Tool 🛠️ with complex animations using GSAP in ReactJS applications. 👀 Please note 👀 we require experience and a solid understanding of Canvas and creating Canvas-based animations. Responsibilities: • Develop and maintain animations in ReactJS applications using GSAP. • Collaborate with the design team to create visually stunning and responsive animations. • Optimize animations for performance across devices and browsers. • Integrate and synchronize audio and video elements within the application. • Create interactive and engaging user interfaces with Canvas animations. • Troubleshoot and resolve animation-related issues. • Research and develop new animations based on the core GSAP library. Requirements: • Proven experience as a GSAP ReactJS Developer. • Strong proficiency in ReactJS and TypeScript. • Extensive experience with GSAP and complex animations. • Solid understanding of Canvas and creating Canvas-based animations. • Experience with integrating audio and video elements in web applications. • Strong knowledge of HTML5, CSS3, and responsive design principles. • Excellent problem-solving skills and attention to detail. • Strong communication skills and team collaboration.

Hi yall, I'm hoping I can get some help with some gsap animations in React. I have a UI i'm working on where an inactive segment animates by translating up, while a new active element translates to 0 from the bottom.. There is a noticeable flicker of no content before the animation starts. I don't know what I'm doing wrong to cause this. I first noticed it in my storybook. Here's a link to my code transferred to a codesandbox to demonstrate; this is the core of the logic where the animation happens: https://codesandbox.io/p/sandbox/gsap-expedition-w96d45?file=%2Fsrc%2Fcomponents%2FExpedition%2FSegment.tsx%3A189%2C28 You can recreate the animation sequence by clicking on the buttons at the top which should trigger the animations to change. Nothing will happen if you click the same button twice Caveat: I know I should be using useGsap hook - but I can't until we update our react version. So here i use a custom hook instead. Any help would really be appreciated!

I am not a native English speaker and my writing may be poor, but thank you in advance. What I want to do Final Goal. * As a Wordpress block, I want to create a component that switches images as it scrolls, like a GIF. Specifications 1. the image changes by scrolling 2. the block is like a sticky Ideally, the block should behave like a sticky. 2. When the scrolling brings the block to a given location, in this case the middle, the animation of the image switching will start, and when it switches to the last image, the sticky-like behavior will resume. 3. 3. The number of images and the amount of scrolling per image should be adjustable. 4. Use Next/image for performance. However, we are currently unable to meet most of the specifications. Please advise. https://codesandbox.io/p/devbox/mutable-sunset-phspgm?layout=%7B%22sidebarPanel%22%3A%22EXPLORER%22%2C%22rootPanelGroup%22%3A%7B%22direction%22%3A%22horizontal%22%2C%22contentType%22%3A%22UNKNOWN%22%2C%22type%22%3A%22PANEL_GROUP%22%2C%22id%22%3A%22ROOT_LAYOUT%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22UNKNOWN%22%2C%22direction%22%3A%22vertical%22%2C%22id%22%3A%22clpgsu9rd000c3b6hk9fvt80r%22%2C%22sizes%22%3A%5B70%2C30%5D%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22EDITOR%22%2C%22direction%22%3A%22horizontal%22%2C%22id%22%3A%22EDITOR%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22EDITOR%22%2C%22id%22%3A%22clpgsu9rd00033b6hgs78ghyh%22%7D%5D%7D%2C%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22SHELLS%22%2C%22direction%22%3A%22horizontal%22%2C%22id%22%3A%22SHELLS%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22SHELLS%22%2C%22id%22%3A%22clpgsu9rd00093b6h4tuvn8da%22%7D%2C%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22SHELLS%22%2C%22id%22%3A%22clpgsv2wp00as3b6h9q1zxkca%22%7D%5D%2C%22sizes%22%3A%5B50%2C50%5D%7D%5D%7D%2C%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22DEVTOOLS%22%2C%22direction%22%3A%22vertical%22%2C%22id%22%3A%22DEVTOOLS%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22DEVTOOLS%22%2C%22id%22%3A%22clpgsu9rd000b3b6hz66bjsev%22%7D%5D%2C%22sizes%22%3A%5B100%5D%7D%5D%2C%22sizes%22%3A%5B50%2C50%5D%7D%2C%22tabbedPanels%22%3A%7B%22clpgsu9rd00033b6hgs78ghyh%22%3A%7B%22id%22%3A%22clpgsu9rd00033b6hgs78ghyh%22%2C%22tabs%22%3A%5B%5D%7D%2C%22clpgsu9rd000b3b6hz66bjsev%22%3A%7B%22tabs%22%3A%5B%7B%22id%22%3A%22clpgsu9rd000a3b6hs7vcy8u6%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22TASK_PORT%22%2C%22taskId%22%3A%22dev%22%2C%22port%22%3A3000%2C%22path%22%3A%22%2F%22%7D%5D%2C%22id%22%3A%22clpgsu9rd000b3b6hz66bjsev%22%2C%22activeTabId%22%3A%22clpgsu9rd000a3b6hs7vcy8u6%22%7D%2C%22clpgsu9rd00093b6h4tuvn8da%22%3A%7B%22tabs%22%3A%5B%7B%22id%22%3A%22clpgsu9rd00043b6ht4kjqek2%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22TASK_LOG%22%2C%22taskId%22%3A%22dev%22%7D%2C%7B%22id%22%3A%22clpgsu9rd00053b6hea0ksahd%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22TASK_LOG%22%2C%22taskId%22%3A%22build%22%7D%2C%7B%22id%22%3A%22clpgsu9rd00063b6hps2cukre%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22TASK_LOG%22%2C%22taskId%22%3A%22start%22%7D%2C%7B%22id%22%3A%22clpgsu9rd00073b6hr3bn3ejy%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22TASK_LOG%22%2C%22taskId%22%3A%22lint%22%7D%2C%7B%22id%22%3A%22clpgsu9rd00083b6hay6mh0wm%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22TASK_LOG%22%2C%22taskId%22%3A%22install%22%7D%5D%2C%22id%22%3A%22clpgsu9rd00093b6h4tuvn8da%22%2C%22activeTabId%22%3A%22clpgsu9rd00083b6hay6mh0wm%22%7D%2C%22clpgsv2wp00as3b6h9q1zxkca%22%3A%7B%22tabs%22%3A%5B%7B%22id%22%3A%22clpgsutp300ao3b6hzundduq5%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22TERMINAL%22%2C%22shellId%22%3A%22clpgsv34k00hwefge61fm17o6%22%7D%5D%2C%22id%22%3A%22clpgsv2wp00as3b6h9q1zxkca%22%2C%22activeTabId%22%3A%22clpgsutp300ao3b6hzundduq5%22%7D%7D%2C%22showDevtools%22%3Atrue%2C%22showShells%22%3Atrue%2C%22showSidebar%22%3Atrue%2C%22sidebarPanelSize%22%3A15%7D

Hi all! I was wondering what type I should give 'timeline'. Because I received this error: Binding element 'timeline' implicitly has an 'any' type. I am trying to figure out a stable solution. I provided my source code: 'use client' import { useEffect, useRef } from 'react' import Image from 'next/image' import styles from './ImageGrid.module.scss' import { scaleCenterImage, moveUpTitle, introAnimation } from './animations' const ImageGrid = ({ timeline }) => { const centerImageRef = useRef(null) const leftImagesRef = useRef([]) const rightImagesRef = useRef([]) const centerImageWrapperRef = useRef(null) const centerImageTitleRef = useRef(null) useEffect(() => { introAnimation(centerImageWrapperRef.current) timeline && timeline .add( scaleCenterImage( centerImageWrapperRef.current, centerImageRef.current ), '<' ) .add(moveUpTitle(centerImageTitleRef.current), '<') }, [timeline]) return ( <section className={styles.imageGrid}> <div className={styles.imageGrid__inner}> <div onClick={() => timeline.play()} className={styles.imageGrid__imageWrapper} ref={centerImageWrapperRef} data-wrapper-center > <div className={styles.textReveal}> <h2 className={styles.imageGrid__imageTitle} ref={centerImageTitleRef} > Re:Active </h2> </div> <Image ref={centerImageRef} sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw' priority fill data-image-center className={styles.imageGrid__image} src='/images/practice_1.jpg' alt='' /> </div> </div> </section> ) } export default ImageGrid

Hello, I'm struggling to solve a problem with a verticalLoop animation on columns in my web layout. Any suggestions or code would be appreciated. Here's the demo: https://stackblitz.com/edit/gsap-react-basic-f48716-cphkak?file=src%2FApp.tsx I want to apply the verticalLoop animation to the columns. There are usually two columns, but sometimes it appears as one column due to window size. I've adjusted the layout using flex-wrap-reverse in tailwindCSS. The issue is that the animation doesn't work correctly after resizing the window. Specifically, I want two verticalLoop animations for each column when they are side by side, and one verticalLoop animation when they appear as a single column due to the flex-wrap CSS property. To handle this, I've created an isFlexWrapped state to conditionally run the animations. I also have a getIsFlexWrap function to detect the column layout on window resize. However, after resizing, the animation doesn't work as expected. The intended animation behavior is as follows: - When there are two columns, the first column's animation speed is 1, and the second column's animation speed is 0.9. - When there's one column, the animation speed for the entire column is 1. - During window resizing, the animation should either pause or reset to the first position (progress 0). - After resizing the window and the column layout changes (from 2 to 1 or 1 to 2 columns), the appropriate animation should run. I'm not sure what I'm missing or if I've used the verticalLoop animation or the useLayoutEffect hook incorrectly. Any hints or guidance would be greatly appreciated. Thank you for your assistance.

Hi, I'm trying to make a magnetic hover composable in Vue3, GSAP and I wanted to replicate from this Link 2 Ways to Make a Magnetic Buttons using React, GSAP, Framer Motion (olivierlarose.com) . I'm needing help how to convert it with typscript too. Here is what I have so far : import { ref, watchEffect } from 'vue' import gsap from 'gsap' export function MagneticHover({ children:any }) { const magnetic = ref(null) watchEffect(() => { const xTo = gsap.quickTo(magnetic.value.current, 'x', { duration: 1, ease: 'elastic.out(1, 0.3)' }) const yTo = gsap.quickTo(magnetic.value.current, 'y', { duration: 1, ease: 'elastic.out(1, 0.3)' }) magnetic.value.current.addEventListener('mousemove', (e) => { const { clientX, clientY } = e const { height, width, left, top } = magnetic.value.current.getBoundingClientRect() const x = clientX - (left + width / 2) const y = clientY - (top + height / 2) xTo(x) yTo(y) }) magnetic.value.current.addEventListener('mouseleave', (e) => { xTo(0) yTo(0) }) }) return () => { return children({ ref: magnetic }) } }

Hey there, I'm working on a project right now and wanted to use GSAP for that, but I have a problem setting it up with SvelteKit and Typescript. I tried importing the module with the Text Plugin and everything works fine in the Browser but PhpStorm displays an error when I try registering the plugin. I registered GSAP and the TextPlugin like in the following example import gsap from 'gsap/dist/gsap'; import { TextPlugin } from 'gsap/dist/TextPlugin'; gsap.registerPlugin(TextPlugin); But just like you see on the image I get an error 'Unresolved function or method registerPlugin()' The same error is happening when I try to use gsap.fromTo but not when I use gsap.to etc. Its pretty weird, cause just like I said everything works fine in the browser ? Thank you very much!

Hi, I'm currently building some React hooks to make using GSAP easier in React. const [tween, { ref }] = useTween(({ node }) => gsap.to(node, { opacity: 0.5 }) ) // tween.play() // tween.pause() Now the tween value should have the type Tween | Timeline, but I don't have access to these types; so it is set to any. Maybe there's already a way to do this and I'm missing something?

I want to usenuxt-gsap-module on my nuxt app. I follow the docs in github : https://github.com/ivodolenc/nuxt-gsap-module but I can't acces to this.$gsap in may pages and components, it throws an error : Property '$gsap' does not exist on type 'XXX' my package.json file "devDependancies" : { "nuxt-gsap-module": "1.7.1" } index.vue boxRotation (): void { const gsap = this.$gsap gsap.to('.box', { rotation: 27, x: 100, duration: 1 }) } mounted () :void { this.boxRotation() } nuxt.config.js buildModules: [ '@nuxt/typescript-build', 'nuxt-gsap-module' ],

I am integrating simple gsap animations into my React application. I can trigger a animation.play() fn on onMouseEnter, but the animation.reverse() fn is not working. Here's my set up: const hoverScaleAnimation = ( ref: MutableRefObject<HTMLDivElement | null> ) => { return gsap.to(ref.current, { scale: 1.05 }); }; const onEnter = (ref: MutableRefObject<HTMLDivElement | null>) => { hoverScaleAnimation(ref).play(); }; const onLeave = (ref: MutableRefObject<HTMLDivElement | null>) => { hoverScaleAnimation(ref).reverse(); }; Originally I was just triggering new gsap.to animations in the hover functions, but I thought this would be cleaner/less need to calculate how to scale and de-scale. I am following these react & gsap guidelines from greensock, and tried to use reverse() in line with the recommendations here and here. Code sandbox

Greetings Everyone, hope you are fine. Please I'm faced with a difficulty. I just created a basic sveltekit typescript template project. Immediately installed gsap with flip plugin. opened index.svelte and imported flip plugin as follows import { Flip } from 'gsap/Flip'; and compiled the application and it's failing with the error as shown in the image. I've been unable to resolve it for close to a day now. Please, can anyone help me on how to import gsap flip plugin in sveltekit properly. if I import gsap it functions fine but not the flip plugin. I've tried the solutions outlined here to no avail.

Hey Team, We've been working with all GSAP modules for a long time and it's great. Love the additions and included types for Typescript support. Today I've noticed that the minX/minY readonly properties are missing from the types in draggable.d.ts causing an error. The maxX/maxY properties are there: readonly maxX: number; readonly maxY: number; Maybe we need to use other properties, but I've been using minX/minY for a long time already.

ive added both gsap (npm install --save gsap) and @types/greensock (npm install --save-dev @types/greensock) to my prototype app I am using to learn more about greensock. npm install completes successfully, however when building the app, I get a "Duplicate identifier 'TimelineMax'" error. I've confirmed that there are multiple definitions of this and other gsap classes in both these lib's (found in gsap-core.d.ts for gsap and index.d.ts for @types/greensock). I did find the install instructions (here: https://greensock.com/docs/v3/Installation) which references 'typescript errors" re: locations of types being defined - - - but that didn't work. Was wondering if there is something else I am missing? Thx in advance for any insights

Hello guys, I'm trying to use ScrollTrigger.batch with typescript, but I can't set the markers nor the triggers, when I try yo put the markers for instance it says: Argument of type '{ onEnter: (batch: Element[]) => Tween; markers: boolean; }' is not assignable to parameter of type 'ScrollTriggerBatchVars'. Object literal may only specify known properties, and 'markers' does not exist in type 'ScrollTriggerBatchVars'.ts(2345) my code so far: gsap.set(".work", { y: 100 }); ScrollTrigger.batch(".work", { onEnter: (batch) => gsap.to(batch, { opacity: 1, y: 0, stagger: { each: 0.15, grid: [1, 3] }, overwrite: true, }), markers: true, }); am I doing something wrong?

Hello! I'm importing ScrollTrigger into a React component and noticed the ScrollTrigger import redlining. I installed gsap with yarn. I tried including the @types/gsap package but I see that all of the types are included in the gsap package already. There is a scroll-trigger.d.ts file in the gsap package but my import can't seem to find it. I've tried importing a few other plugins and they work as expected. Let me know if you have any ideas or if there's any additional info that I can provide. Thanks! Error message: Could not find a declaration file for module 'gsap/ScrollTrigger'. '[directory-name]/node_modules/gsap/ScrollTrigger.js' implicitly has an 'any' type. Try `npm install @types/gsap` if it exists or add a new declaration (.d.ts) file containing `declare module 'gsap/ScrollTrigger';`

Hi! i'm trying to create a confetti animation in my react projecta, following some tutorial and code example i found but there are something that im not understand. See code: import React from 'react'; import { gsap, TweenMax } from 'gsap'; class Stars extends React.Component { render() { TweenMax.to('img', { xPercent: '-50%', yPercent: '-50%', }); const total = 70; const container = document.getElementById('container'); let w = container?.offsetWidth; let h = container?.offsetHeight; for (let i = 0, div; i < total; i++) { div = document.createElement('div'); div.className = 'dot'; container?.appendChild(div); gsap.set(div, { x: R(0, w || 1), y: R(-100, 100), opacity: 1, scale: R(0, 0.5) + 0.5, backgroundColor: 'hsl(' + R(170, 360) + ',50%,50%)', }); animm(div); } function animm(elm) { TweenMax.to(elm, R(0, 5) + 3, { y: h, ease: Linear.easeNone, repeat: -1, delay: -5, }); TweenMax.to(elm, R(0, 5) + 1, { x: '+=70', repeat: -1, yoyo: true, ease: Sine.easeInOut, }); TweenMax.to(elm, R(0, 1) + 0.5, { opacity: 0, repeat: -1, yoyo: true, ease: Sine.easeInOut, }); } return <p>oi</p>; } } export default Stars; what is the "R" function which set a value to 'x' and 'y' coords?

Hi guys! Good morning. I'm newbie with GSAP and i'm learning it but i'm also trying to use it in my react project. so, i'll show peaces of my code before i explain the error: import { gsap, TweenLite } from 'gsap'; class MainScreen extends React.Component<IProps, IState> { constructor(props: IProps) { super(props); gsap.registerPlugin(TweenLite); this.state = { myElement: null, myTween: null, canInitCircles: true, }; } private initCircles = (div: any, canInitCircles: boolean) => { if (canInitCircles) { this.setState({ myElement: div, myTween: TweenLite.to(this.state.myElement, 1, { x: 500, y: 500 }), canInitCircles: false, }); } }; public render() { const { classes } = this.props; const { canInitCircles } = this.state; return ( <Wrapper className={classes.root}> <Circles ref={(div: any) => this.initCircles(div, canInitCircles)} /> <Planet /> <Navbar /> </Wrapper> ); } nothing hard to understand! I have a component called Circles which is a bundle of img html tags with some SVG in each of then and i'm trying to move this component, just to practice GSAP with React. (note: the prop 'ref' in Circles component, receive any). but i'm taking this warning: can anyone knows what its going on? i had already registered the TweenLite plugin at the constructor method. Also, i installed the GSAP by NPM, see on my package.json: "gsap": "^3.1.1",

I've installed and imported GSAP and @types/gsap, and my file.ts import it well, but when i run gulp with the Typescript Gulp Configuration i get this error: Error: Cannot find module 'babelify' from 'D:path-to-directory\node_modules\gsap'. I've installed all babel components until i get one last error that tells me "cannot find the function canCompile".

I can't seem to get PixiPlugin to function in my typescript application. Do I need to do anything specific to use PixiPlugin or does it come with the gsap npm install? I wasn't able to find an npm package for the pixiplugin so I assumed it came with the gsap install. I have the latest and greatest version of GSAP but can't get this to function. TweenLite.to(someSprite, 1, {pixi:{colorize:"red", colorizeAmount:1}}); I'm using Pixi5 and Gsap 2.1.3 What am i missing? Thanks!

Hello. Recently I bought a package which contains DrawSVGPlugin. I want to implement this plugin in Ionic3 . As I know a npm package doesn't have plugins from club, nor @types/gsap. I added DrawSVGPlugin.js into node_modules/gsap and later recreated an android platform. In .ts file as import I tried: import { DrawSVGPlugin } from "gsap/DrawSVGPlugin"; and as calling plugin: TweenLite.to("#svg_1", 1, {drawSVG:"40% 60%", ease:Power1.easeInOut}); my html source of svg: <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" preserveAspectRatio="none"> <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="45.78805" x2="87.36405" y1="45.24458" x1="8.28813" stroke-width="12.5" stroke="#000" fill="none"/> </svg> Can anyone tell me what I am doing wrong? Or is there different way of doing it?

I'm working on a project where we use TS and would like to add the CustomEase lib. We have added the GSAP through NPM and since CustomEase isn't part of it for some reason I have hard time to find a way to get it working. The error i recive is: !!! ERROR: browserify: Cannot find module '../TweenLite.js' from '/Users/myuser/Projects/myproject/src/ts'

When I am running my angular4 application and i start on a specific route, and navigate to any other route, I get this error ERROR TypeError: Cannot read property 'hasAttribute' of null When I search my entire project and all loaded dependencies, one of the files that uses hasAttribute is TweenMax and ScrollMagic. Does that mean my errors has to be somewhere in TweenMax or ScrollMagic. It looks like the app is trying to load or find a dependancy, as the error is piped out in the Webpack Bundle right before GSAP starts. If i start on app.about as my route, and goto app.contact or app.welcome or app.portfolio I get the hasAttribute error when I leave the about scene. I destroy a scrollmagic scene on leave but i do that in another place on another route and don't get this cryptic error. if i start on ANY other route, and goto about and then off about, i never get that error. So i guess my question is, do you think this is TweenMax related? assuming that error is thrown? or could there be a possibility that its something with webpack packing tweenmax, or maybe something else not necessarily TweenMax. I tried to clear the component in that route out to be 100% blank, and it still happens. The only time it doesnt happen is if i obviously start from another route, or I remove tweenmax and scrollmagic from my app, and then it works again.. i kinda feel this question will be hard to answer without someone just looking at the source 100%, so im not expecting much but just wondering if anything clicks for anyone?

Hi, this is a confusing one for me, I have an Angular 2 app using typescript, this project is using the angular CLI I have been having problems with the GSAP import, the import statement in my component is as follows import { TweenLite, Linear } from 'gsap'; Now this works actually, I mean I can use the TweenLite object and do tween things and see the results on the page, however I was getting the build error through ng serve: ...@types/gsap/index.d.ts' is not a module. This is a problem because it prevents me from making a dist build. I noticed in the latest @types release the line export = TweenLite; was added to index.d.ts, I thought this might fix things so I updated it, but no, now I get the error @types/gsap/index"' resolves to a non-module entity and cannot be imported using this construct. I'm confused and don't fully understand how types work really but every other library I use either works like this or I use import * as ... from 'some lib' syntax and it works, can anyone help me get rid of these compilation errors?