Search the Community

Hey guys, I'm very new here (& not all that great with programming) - long time lurker, big admirer of GSAP and happy be in the club! I'm hoping somebody here can help me figure out what I'm doing wrong. I'm basically attempting to convert this simple CodePen into Frontity/React (embed at bottom of post). Here's the link to my CodeSandbox https://codesandbox.io/s/xenodochial-saha-mfj42?file=/packages/mars-theme/src/components/test-scroll.js The errors I get seem to come from my scroll-test.js file. No matter what I do, I can't seem to get any ScrollTrigger action (or even basic 'to' motion). There have been some phantom moments once I've changed some code to target a different element, the page instantly begins to animate - but after I refresh, I'm given fatal errors instead. Not really sure what that is... If I attempt to target certain elements, it won't run. If I target a previously declared component, it at least runs - but it claims scrollTrigger is an invalid property I'm left to believe that GSAP isn't properly firing. Any ideas for troubleshooting this problem? Happy to supply any additional information requested. I tried to follow the rules and created my problem on codesandbox, since it was the only service that had Frontity available. Cheers, AGW

Hello GreenSock community ? hope you are well and keeping safe!!! I am trying to build a draggable carousel, which when you click an element it expand and animate its content in, other element shrink accordingly. And once a panel is open if you drag the next or the previous panel, it should open the next panel while being drag. So far I have a responsive draggable carousel in React; essentially @OSUblake draggable carousel example but using react (Thanks @OSUblake !!!) https://codepen.io/tomsah/pen/vYKqqVx?editors=0010 I have created the basic animation that I would like to happen when a user click one of the carousel item https://codepen.io/tomsah/pen/WNxqqEz I have tried a few things and I never get the result I am after ?, Element are getting updated using onClick but their position is always off, and when I drag again the carousel it is getting worse I am not sure how to properly update the carousel item with, X & left value properly, and how would I pass the animation to the next item dragged element. Thank you in advanced for your help and time

I am new to gsap and reactjs. I have a problem with using TimeLineLite with react-router. A navbar is created with a link redirecting to the homepage. When I spam clicking it, the animation crashes. How do I solve this problem? My code is on the codesandbox. Any suggestions are highly appreciated. https://codesandbox.io/s/sad-brook-if9o6?file=/src/Navbar.css

Hello guys, Just started my first gsap project using react js. There is a loader which is visible at the initial load and I pass a flag prop to the main component once the loader disappears. Once this flag is received by the main component, I play the timeline using the play method. In the timeline I'm fading in multiple elements present in the section. I'm facing a problem where this timeline is a part of the ScrollTrigger animation which happens on every section scroll. So for the first screen, as soon as the loader disappears the animation is already complete as the ScrollTrigger considers it in the viewport. //Main component this.timeline = gsap.timeline().pause(); //sections, sectionRight, descriptions are refs of sections and elements which fade in. sections.forEach((section, index) => { const tl = gsap.timeline({ paused: true }); tl.to(sectionRight, { autoAlpha: 1, duration: 0.5 }).to(descriptions, { autoAlpha: 1, duration: 0.5, y: 0 }, 1); ScrollTrigger.create({ trigger: section, animation: tl, start: "top +=70", end: "bottom top", scrub: 0.5 }); }); //this.timeline is same as above tl which is played when the loader flag is received. But the animation is already played due to being in the viewport. Also, I want the timeline (tl) to play on each section scroll when in viewport but doesn't work properly. Not able to figure out where is it going wrong. Help very much appreciated. Thanks in advance.

Hello, I was wondering if is possible to change the direction in which 2 paths are being morphed. Currently, my path is being morphed from left to right, which doesn't look that great. Is it possible to modify it so that it starts morphing from the center and expand outwards? The link to my animation is https://codesandbox.io/s/confident-violet-lywmu?file=/src/Animate.js

Hello, I am new to animation and SVG in general. I am using attr property to morph between 2 paths in a SVG. I created the shapes with same number of anchor points in Illustrator. The problem I am experiencing is that at the start of the animation, the path is all messed up. I am not sure if what I did is correct but how can I achieve that the starting path is the one given and start expanding from there towards the new path? I created a codesandbox showing this behavior at https://codesandbox.io/s/falling-dew-7l0cz?file=/src/Animate.js I was able to animate it correctly using different frames and a timeline, but is not as smooth. Any help is greatly appreciated.

Hi guys, having a little bit of trouble here with ScrollTrigger I'm trying to learn it's usage by following the tutorial for horizontal snapping sections found in the docs. Mine won't work for some reason however. I'm not sure what I'm doing wrong. I've tried to get gsap to register the ScrollTrigger plugin, and my animation is practically the same as theirs (minus the sections.length - 1 because I don't have that extra panel in the beginning. I'm not sure exactly what's going on. It's also of note that I'm trying to add this content in the midst of content already on my page. Any help would be appreciated. https://codepen.io/tonycre8/pen/bGEMyvx Edit: Please refresh, I've been working on just getting the codepen to render properly as a React component. Edit 2: It seems as if this code works on the code pen. But it will not work in actual code?? I'm not sure what's going on there. Here's a video of my code not working in an actual project. The code is identical to the one demonstrated in the codepen. CSS and everything. https://www.loom.com/share/bf002f5668034e418c9486204dbd8426

Hi guys! This is my first post ever, I'm new to GSAP and I'm soooooooooo stuck, I need your help I'm creating a series of cards (length varies) that scroll vertically and infinitely, I've been able to achieve that, however, at every point, there should be an active card that appears expanded than the rest and that card is usually the one that's positioned at the middle of the view port... That is, as the cards scroll up vertically, whichever card is at the vertical middle should expand and once it's gone above the middle section of the viewport, the card below it should now become expanded, and so on... so, at any given time, a card should be in focus... I'm VERY new to GSAP and this has kicked my ass for about a month, Please I'd appreciate some help here, Thanks Also, please let me know if my code can be improved... BTW, this is how the expanded card looks in motion: Note: I must also mention that, the way I have this implemented in my actual code (Gatsby application), each card gets a prop - active - and whenever active is set to true, the classes that cause the expansion are applied... So, a solution that would work out of the box for me is one that updates the state of a particular card whenever it's in the viewport... so, something that checks and updates the prop of the card... if this isn't good for performance I'm ready to stick with whatever works... Thanks so much:

Hello, Can you tell me if it is the best way to play the animation with Scrolltriger, gsap and react. Is there another way to acheive this ? I have attached a codepen demo. Thanks in advanced

Hi everyone, I'm working on a projet where I have a menu, and a side-menu. Every thing is fine: when i click on the menu button the side menu opens, and when i click again it get back to close state. But if I click to fast the side menu closes but the text inside doesn't disapear, any idea on why please ? :) (I can't reproduce on codepen so I guess the code here and the two screen would help ^^" ) Screen 1: side menu is closed Screen 2: side menu is open Screen 3: side meni is closed but text inside is still visible My GSAP code: const handleAnim = () => { let sideMenuBackground = document.querySelector(".sideMenu__background"); let sideMenu = document.querySelector(".sideMenu"); if (menuCheckbox) { TweenMax.from(sideMenuBackground, 0, { width: "0px", ease: Power1.easeIn }) TweenMax.to(sideMenuBackground, 0.3, { width: "324px" }) TweenMax.from(sideMenu, { display: "none", opacity: "0", ease: Power0.easeNone }) TweenMax.to(sideMenu, 0.3, { display: "block", opacity: "1", delay: 0.4 }) } else { TweenMax.to(sideMenu, { display: "none", opacity: "0", ease: Power0.easeNone }) TweenMax.to(sideMenuBackground, 0.1, { width: "0", delay: 0.2 }) } } The "handleAnim" function is called in menu burger button and icons button: <nav className={`navList ${menuCheckbox && "navList__isOpen"}`}> <div className={menuCheckbox ? "menuBurger__nav menuBurger__cross" : "menuBurger__nav"}> <input type="checkbox" onClick={() => { handleCheckbox(); }} /> <span className="top"></span> <span className="middle"></span> <span className="bottom"></span> </div> <ul> <li> <button onClick={() => { handleCheckbox(); }}> <i className="fal fa-folders"></i> </button> </li> <li> <button onClick={() => { handleCheckbox(); }}> <i className="fal fa-balance-scale"></i> </button> </li> <li> <button onClick={() => { handleCheckbox(); }}> <i className="fal fa-receipt"></i> </button> </li> </ul> </nav>

Hey my friends! I'm working with React and I use GSAP for the first time with Contexts. Perhaps i mistaken (because of the refs and useEffects hooks?), but my timeline's working twice all the time, and I don't know why. I tried to use from, fromTo, to... And actually every time, the issue is present. I created a short CodeSandBox to illustrate my issue. Of course, for my example I don't need the use the Context, but in my real project I would. Hope you guys are fine in these strange moments. Have a nice day! Lucie

Hi! I am trying to draw a text, but when I'm using the useRef hook the animation acts weird. Is their someone with experience using React Hooks and gsap? Or who already came across a similar problem?

Hello, I use TweenMax in React, no worries until then. Now I would like to use the TextPlugin plugin but I can't get it work with the import... import {TweenMax} from "gsap"; const TextPlugin = require("gsap/TextPlugin"); const About = () => { let xpRef = useRef<HTMLHeadingElement>(null); let educRef = useRef<HTMLHeadingElement>(null); useEffect(() => { TweenMax.to(xpRef.current,1, {text: "This is the new text", ease: "none"}); TweenMax.to(educRef.current,1, {text: "This is the new text", ease: "none", delay: .3}); }, []); I test that too : import {TweenMax, TextPlugin } from "gsap/all"; const plugins = [TextPlugin]; const About = () => { let xpRef = useRef<HTMLHeadingElement>(null); let educRef = useRef<HTMLHeadingElement>(null); useEffect(() => { TweenMax.to(xpRef.current,1, {text: "This is the new text", ease: "none"}); TweenMax.to(educRef.current,1, {text: "This is the new text", ease: "none", delay: .3}); }, []); Both of them didn't work Many thanks in advance

Hi, everyone. I'm new to GSAP, and I'm trying to add GSAP animation to create auto vertical scrolling boxes in my React app. Boxes are supposed to auto-scroll in a vertical position, while the box in the center has opacity 1, 2 other boxes will fade out until they're in the center. image of the animation I want to achieve. Codesandbox code is https://codesandbox.io/s/auto-scrolling-pv502. I was able to create 3 boxes, they auto-scroll only once, I can't figure out how to make them auto-scroll repeatedly and in order(so 1st box in the center =>2nd in the center => 3rd, and repeat). I tried to use repeat:-1, it doesn't allow to scroll boxes in order. Any help and suggestions are greatly appreciated, Thank you.

how to make Scroll with text fill like link below I have done everything I think I can do and have not had a similar result even I hope for any help and at least an idea http://clapat.ro/themes/hervin-wordpress/

#updating gsap from 2.1.3 to latest version resolved the issue When I try to move an <g> element to desired position, it works as expected within react storybook component. However, when export to an app, it adds css transform which is not what I wanted. TweenLite.set(target, { css: { x: 264, y: 12, opacity: 1 } }); react storybook element; correct behavior <g class="abc" id="abcd" data-svg-origin="315 305" transform="matrix(1,0,0,1,264,12)" style="z-index: 1000; opacity: 1; cursor: pointer; touch-action: none; user-select: none;"> <foreignObject width="1" height="1" x="362" y="331"> <div id="selectableItem-0"> <div style="height: 1px; width: 1px;"></div> </div> </foreignObject> <path cursor="grabbing" stroke="#4C5D65" stroke-width="1" d=" M 350, 340 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0" fill="#00B6F1"></path> </g> exported component in an App; incorrect behavior <g class="abc" id="abcd" data-svg-origin="315 305" transform="matrix(1,0,0,1,264,12)" style="z-index: 1001; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 284.979, 7.31769, 0, 1); opacity: 1; cursor: pointer; touch-action: none; user-select: none;"> <foreignObject width="1" height="1" x="362" y="331"> <div id="selectableItem-0"> <div style="height: 1px; width: 1px;"></div> </div> </foreignObject> <path cursor="grabbing" stroke="#4C5D65" stroke-width="1" d=" M 350, 340 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0" fill="#00B6F1"></path> </g> the difference is inside style attr transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 284.979, 7.31769, 0, 1) no idea, what causes this. will appreciate if you can give me some hints these do not help either TweenLite.to(target, 0,{ x: 264, y: 12, opacity: 1 }); TweenLite.set(target, { css: { transform: `matrix(1, 0, 0, 1, ${moveToX}, ${moveToY})`, opacity: 1 } });

Hello, I'm doing something in React.js and I don't know why the scrollTo doesn't work. Basically what I'm trying to do is something similar to what Mikel did : https://codepen.io/e1668058/pen/XWbBGPz?editors=0010 but without the buttons. I'm just trying to figure out how to do it just with the mousescroll. just a little extra, I've also thought of adding an onStart and onComplete for the TweenMax so that when it starts I lock the mousewheel with : window.addEventListener("wheel", function(e){e.preventDefault();}, {passive: false} ); and when it completes I unlock the mouse with passive: true. Thank you. Heres my code pen.

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",

Hello, I need to set my react state inside my timeline after first animation ends and then continue with animations: const tl = gsap.timeline(); tl.to(pTitle, 1.5, { x: -550 }).setNewState after previous animation.to(pTitle,1.5,{x:150}) so far I could achive it with that: tl.to(pTitle, 1.5, { x: -550 }).add( setTimeout(() => { //setNewState }, 1500) ).to(pTitle, 1.5, { x: "-4%" }); is this proper way of implementing this? Or is there "smoother" way of achieving it like with delayedCall() - which is not available in timeline

I'm trying to get GSAP working in my React Gatsby project. I've made a simple test following @Rodrigo guide https://greensock.com/react Here is my component - no animation and no errors either import { TweenLite } from "gsap/TweenLite"; class Messages extends React.Component { constructor(props) { super(props); this.myElement = null; this.myTween = null; } componentDidMount() { this.myTween = TweenLite.to(this.myElement, 1, { x: 100, y: 100 }); } render() { return ( <div ref={div => (this.myElement = div)}> <img src={require("../images/logo.png")} width="50" /> </div> ); } } export default Messages;

Hello, I'm having trouble trying to debug what is going wrong with my animations. I was able to use mock data and get the desired effect of having my animation stagger through my array of card objects. However, once I started using real data my animations will no longer trigger. Now there are a few strange observations I made: 1. My data is making it into the gsap related mapping func (I have a console log that is proving the cards do exist inside the map) 2. The callback at the very end of my animation is still firing and updating state. So, in short, despite it working with mock data when I switched over to 'live-data' it no longer even triggers the animation despite the `console.log` showing that there is indeed data to map over and the fact that the callback at the end of the animation still triggers... Any ideas? Here is the component: import React, { Component } from "react"; import { connect } from "react-redux"; import "./PlayerHand.scss"; import TreasureCard from "../TreasureCard/TreasureCard"; import ActionCard from "../ActionCard/ActionCard"; import Card from "../Card/Card"; import { TimelineMax } from "gsap"; import { gsapCardsCycleIn } from "../../greenSock/animations"; import { mockPlayerData } from "../../mockData"; export class PlayerHand extends Component { constructor(props) { super(props); this.cards = []; this.tl = new TimelineMax({ paused: true }); this.state = { renderHand: false }; } componentDidMount = () => { gsapCardsCycleIn(this.tl, this.cards, this.showUserHand); }; // componentDidUpdate(prevProps, prevState) { // if (prevProps.playerHand !== this.props.playerHand) this.tl.restart(); // } showUserHand = () => { this.setState({ renderHand: true }); }; render() { // this.tl // .kill() // .clear() // .pause(0); return ( <React.Fragment> <section className='hand-animations'> {this.props.playerHand && this.props.playerHand.map((card, i) => { // this console.log is logging the relevant data, but for some reason nothing is animating console.log(card); return ( <div className='animated-card' key={i} ref={div => (this.cards[i] = div)}> <p>{card.name}</p> </div> ); })} </section> <button onClick={() => this.tl.play()}>Start</button> <button onClick={() => this.tl.reverse()}>Reverse</button> <button onClick={() => this.tl.restart()}>Restart</button> <section className='PlayerHand' style={ this.state.renderHand ? { transform: "translateY(50%)" } : { transform: "translateY(100%)" } } > {this.state.renderHand && this.props.playerHand.map(card => { if (card.category[0] === "Money") { return <TreasureCard card={card} key={card.id} />; } if (card.category[0] === "Action") { return <ActionCard card={card} key={card.id} />; } if (card.category[0] === "Victory") { return ( <Card name={card.name} desc={card.desc} category={card.category} image={card.image} cost={card.cost} id={card.id} key={card.id} /> ); } })} </section> </React.Fragment> ); } } export const mapStateToProps = state => ({ playerHand: state.playerHand }); export default connect(mapStateToProps)(PlayerHand); Here is the GSAP animation I built and imported import { Back } from "gsap"; export const gsapCardsCycleIn = (timeline, dataArray, onComplete) => { timeline .to( dataArray, 0.8, { scale: 1.09, opacity: 1, ease: Back.easeInOut.config(10) }, 0.3 ) .staggerTo( dataArray, 0.4, { left: "45vw", bottom: "25vh", scale: 1.4, cycle: { rotation: i => Math.random() * ((i + 3) * 2), ease: i => Back.easeOut.config((i + 1) * 0.5) } }, 1.2 ) .staggerTo( dataArray, 0.5, { left: "45vw", bottom: "5vh", rotation: 0, scale: 1 }, 0.2 ) .to(dataArray, 0.7, { opacity: 0, y: "100vh", ease: Back.easeInOut.config(1.2), delay: 0.4 }) .to(dataArray, 0, { onComplete: onComplete, delay: 1 }); };

I'm trying to create a Navbar with animations that are controlled by GSAP Timelines and managed by React state. Most of it works great, but I run into a problem when elements in my nav bar are selected in these two orders: ONE, SEVEN, SIX SEVEN, ONE, SIX So two subheadings in a order and then anything else. It seems as if, when we reverse the second timeline, it also plays the first timeline along with it. This leads to the navbar staying open or expanded rather than closed with both timelines reversed. Not sure why this happens? However, when checking to see what Timeline fires (by naming the .data property), it appears that the correct timeline is being triggered. Please see my code sandbox here: https://codesandbox.io/embed/gatsby-starter-default-xvbk9

Hello I am trying to animate numbers which I will get from an API while rendering it into viewport. I have tried to do so but in my case all the instance of numbers are getting updated but I want each number should be updated upto the value I have got from API. How can I achieve this? Here is what I have tried. https://codepen.io/patrickjane/pen/agNePM Thank You!

I'm working on a project using ReactJS with Pixi & GSAP and the js library I'm using is called "react-pixi-fiber". I'm trying to reference the React Pixi Sprite object and handling the animation it using GSAP. However, it changes position without easing, and there's no error message showing. Code as below The "moveEle" function will be called from the parent component. class MainObject extends Component { constructor(props) { super(props); this.state = { ... }; this._refEle = React.createRef(); moveEle = options => { TweenLite.to(this._refEle, options.duration, { x: options.x, y: options.y, ease:Power2.easeOut }).play(); }; render() { return ( <Fragment key="MainElesFragment"> <Sprite ref={div => (this._refEle = div)} anchor={centerAnchor} texture={textureUrl} width={width} height={height} x={x} y={y} key="thisEle" /> </Fragment> ) } }