Search the Community

Hi GSAP champs, I've been working on an animation in which I draw three SVGs located in one section. I'm drawing the svgs with scroll-trigger in same timeline and also pinning that section with pinSpacing: true and the once: true is working fine as expected that it kills the timeline on completion. but the issue is the space that is being added by pinSpacing: true is not removing it self when animation reaches the end. Please help to achieve this. codePen demo is attached already. Thanks in Advance

I've been struggling with the issue for 3 days, rewriting, refactoring code few times. Please help me if possible, guys. I use ReactJS and GSAP to create different computed animations ( overlays over a video ). What happens is that when I seek to specific percentage completed, for example 0.19 out of 49s timeline total length, it does seek to the first 1s part of the animation timeline cycle, and doesn't show the animation at the stage expected based on the progress percentage. I couldn't upload project to codesandbox as 1) it is nda signed and 2) it says that it has exceeded the 500-module items limit; I'm really sorry for that. Could someone please help me? I can share the source code or give access to my github repository. Thanks in advance everyone! import gsap from 'gsap'; import RightTitleStyles from '../../../../styles/right-title.module.css'; import React from 'react'; interface RightTitleProps { range: Object; name: string; currentTime: number; isPreview: boolean; type: 'smaller' | 'bigger'; isVisible: boolean; style: any; subtitle: string; title: string; } const RightTitle = React.memo( ({ videoRef, setStyle, range, name, currentTime, isPreview, type, isVisible, style, title, subtitle, }: RightTitleProps) => { const titleRef = React.useRef(); const { current: tl } = React.useRef(gsap.timeline({ paused: true })); const [ rangeIntervals, setRangeIntervals ] = React.useState< Array< number > >( range.timeIntervals ); const connectTitleRef = ( el : HTMLElement ) => { if (titleRef.current || !el || !videoRef || isPreview ) { if ( isPreview || !el || rangeIntervals === range.timeIntervals ) { return; } else { tl.killAll(); // just clearing out some tweens for repeated recreation } } tl.progress(1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0])); titleRef.current = el; console.log( titleRef.current.id, videoRef, ); console.log('configuring...'); tl.fromTo(videoRef, { width: '100%' }, { duration: 1, width: '63%' }).to(videoRef, { duration: range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1, width: '63%' }).to(videoRef, { duration: 1, width: '100%' }); console.log( 'video configured', ); tl.fromTo( el, { x: name === 'Right Title' ? 150 : -150 }, { duration: 1, x: 0 }, ) .to(el, { x: 0, duration: range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1, }) .to(`#${ el.id }`, { duration: 1, x: name === 'Right Title' ? 150 : -150, }); console.log(range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1); }; // console.log( style, ); React.useEffect(() => { if (!titleRef.current || isPreview) return; console.log( 'styles applied to titleRef', titleRef.current._gsTransform ); console.log( 'these are tweens', tl.getChildren().map( child => child.vars.x || child.vars.width ) ); console.log( 'these are tweens', tl.getChildren().map( child => child.vars ) ); if (!(range.timeIntervals[0] <= currentTime && currentTime <= range.timeIntervals[1])) { console.log( 'current timing doesn`t fit the intervals' ); setStyle({}); tl.progress(0); return; } setStyle({ marginLeft: name === 'Left Title' ? 'auto' : 'unset', marginRight: name === 'Right Title' ? 'auto' : 'unset', }); tl.progress(1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0])); console.log(range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1) console.log( currentTime, range.timeIntervals, 1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0]), ); }, [range.timeIntervals, currentTime]); const show = isVisible; if ( isPreview ) { return <div style={{ top: type === 'smaller' && 0, height: type === 'smaller' && '100%', ...style }} className={RightTitleStyles.aligningWrapper} > <div style={{ transform: isPreview && 'scale(0.55)' }}> <h1> {title} </h1> <p> {subtitle} </p>{' '} </div> </div> } return ( <div ref={ connectTitleRef } id={`${isPreview ? 'previewMode' : 'notPreviewMode'}3${range.color.slice(1)}`} style={{ visibility : !( currentTime + 1 >= range.timeIntervals[0] && currentTime - 1 <= range.timeIntervals[1] ) ? 'hidden' : 'visible', top: type === 'smaller' && 0, height: type === 'smaller' && '100%', ...style }} className={RightTitleStyles.aligningWrapper} > <div style={{ transform: isPreview && 'scale(0.55)' }}> <h1> {title} </h1> <p> {subtitle} </p>{' '} </div> </div> ); } ); export default RightTitle; Title.tsx animation.tsx

I tried to make a simplified version of what I experienced in another project. Essentially I get 2 warning in the console. I tried to make a modal that it will render if the state is equal to true. Else it will return null. I believe my issue is due to returning null. But I don't know how to do this another way. I experimented with the kill() option in gsap, but I had no luck with it. Here is the reference from the docs that I read. import React, { useRef, useEffect } from "react"; import gsap from "gsap"; export default function TestGsap(props) { const box = useRef(); useEffect(() => { gsap.from(box.current, { y: "500", ease: "expo", duration: 2, }); }); if (props.toggleModal === true) { return ( <div> <section ref={box} style={{ width: "10rem", height: "10rem", backgroundColor: "red" }} > <p>Hello, I am a red box.</p> </section> </div> ); } else { return null; } }

Olá pessoal, estou tentando entender o motivo pelo qual a minha animação fica com essas sombras/fantasmas. Seria algo errado no meu código? import { ReactNode, useLayoutEffect, useRef } from "react"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import { Container, GroupCards, GroupCardsLeft, GroupCardsRight, Card, } from "./styles"; interface VendasProps { children?: ReactNode; } function Vendas({}: VendasProps) { gsap.registerPlugin(ScrollTrigger); // Cards let cardRef0 = useRef(); let cardRef1 = useRef(); let cardRef2 = useRef(); let cardRef3 = useRef(); let cardRef4 = useRef(); let cardRef5 = useRef(); let cardRef6 = useRef(); let cardRef7 = useRef(); let cardRef8 = useRef(); let cardRef9 = useRef(); let cardRef10 = useRef(); if (typeof window !== "undefined") { useLayoutEffect(() => { gsap.to(cardRef0?.current, { y: -830, scrollTrigger: { trigger: cardRef0?.current, scrub: 2, }, }); gsap.to(cardRef1?.current, { y: -1030, scrollTrigger: { trigger: cardRef1?.current, scrub: 2, }, }); gsap.to(cardRef2?.current, { y: -1390, scrollTrigger: { trigger: cardRef2?.current, scrub: 2, }, }); gsap.to(cardRef3?.current, { y: -1510, scrollTrigger: { trigger: cardRef3?.current, scrub: 2, }, }); gsap.to(cardRef4?.current, { y: -830, scrollTrigger: { trigger: cardRef4?.current, scrub: 2, }, }); gsap.to(cardRef5?.current, { y: -1430, scrollTrigger: { trigger: cardRef5?.current, scrub: 2, }, }); gsap.to(cardRef6?.current, { y: -1390, scrollTrigger: { trigger: cardRef6?.current, scrub: 2, }, }); gsap.to(cardRef7?.current, { y: -910, scrollTrigger: { trigger: cardRef7?.current, scrub: 2, }, }); gsap.to(cardRef8?.current, { y: -830, scrollTrigger: { trigger: cardRef8?.current, scrub: 2, }, }); gsap.to(cardRef9?.current, { y: -1430, scrollTrigger: { trigger: cardRef9?.current, scrub: 2, }, }); gsap.to(cardRef10?.current, { y: -1390, scrollTrigger: { trigger: cardRef10?.current, scrub: 2, }, }); return () => { gsap.killTweensOf(cardRef0); gsap.killTweensOf(cardRef1); gsap.killTweensOf(cardRef2); gsap.killTweensOf(cardRef3); gsap.killTweensOf(cardRef4); gsap.killTweensOf(cardRef5); gsap.killTweensOf(cardRef6); gsap.killTweensOf(cardRef7); gsap.killTweensOf(cardRef8); gsap.killTweensOf(cardRef9); gsap.killTweensOf(cardRef10); }; }, []); } return ( <Container> <GroupCards> <GroupCardsLeft> <Card ref={cardRef0} id="cardRef0"> <h4>Automatize suas vendas e escale mais</h4> <p> Envio automático de catálogos, ofertas e outras mensagens pelo WhatsApp. </p> <p> Bot disponível para responder dúvidas a qualquer momento, inclusive nos feriados e fins de semana. </p> <p> {" "} Automatize com chatbot e direcione o cliente ao chat humano quando necessário. </p> </Card> <Card ref={cardRef1} id="cardRef1"> <h4>Venda em qualquer canal e em tempo real.</h4> <p>Tenha controle multicanal de todas as suas interações</p> <p> {" "} Ofereça a possibilidade de o seu cliente comprar com você em qualquer canal, obtendo o direcionamento certo. </p> </Card> <Card ref={cardRef2} id="cardRef2"> <h4>1 número = vários profissionais no WhatsApp</h4> <p>Escale suas vendas mantendo apenas 1 número no WhatsApp.</p> <p> Uso de API oficial para mais segurança e estabilidade para o seu negócio não parar. </p> </Card> <Card ref={cardRef3} id="cardRef3"> <h4>Recuperação de carrinho abandonado</h4> <p> Pare de perder vendas por abandono de carrinho. Motive seu potencial cliente a retornar à compra, por meio de envio de mensagens via WhatsApp. Ofereça algo especial, como um cupom de desconto, para que ele possa retomar e concluir sua compra. </p> </Card> <Card ref={cardRef4} id="cardRef4"> <h4>Siga os passos e ações do seu cliente.</h4> <p>Veja quais foram os pontos de interação com a sua marca.</p> <p> Tenha uma visualização simplificada de todos os contatos do cliente em um único lugar. </p> </Card> </GroupCardsLeft> <GroupCardsRight> <Card ref={cardRef5} id="cardRef5"> <h4>Geolocalização para levar o cliente à loja física</h4> <p> Oriente de forma automatizada o seu novo cliente ou um cliente já conhecido a encontrar a loja mais próxima ao endereço dele. </p> </Card> <Card ref={cardRef6} id="cardRef6"> <h4>Comunique a disponibilidade dos seus produtos</h4> <p> Informe seu cliente avisos de reposição no estoque, novidades que chegaram no catálogo, dentre outras atualizações. </p> </Card> <Card ref={cardRef7} id="cardRef7"> <h4>Agilize respostas para dúvidas frequentes </h4> <p> Mantenha visível as dúvidas e respostas mais frequentes dos consumidores e acelere a tomada de decisão. </p> </Card> <Card ref={cardRef8} id="cardRef8"> <h4>Gerencie conversas entre vendedores e clientes</h4> <p> Direcione o cliente de forma automática para o departamento adequado e ofereça atendimento personalizado. </p> </Card> <Card ref={cardRef9} id="cardRef9"> <h4>Vitrine com avaliações sobre seus produtos</h4> <p> Disponibilize comentários e avaliações sobre experiências anteriores com seus produtos para ajudar ainda mais na conversão. </p> <p> Ofereça mais segurança para novos consumidores ao expor experiências anteriores dos seus atuais clientes. </p> </Card> <Card ref={cardRef10} id="cardRef10"> <h4>Indicação de produtos no momento certo</h4> <p> Sugira produtos complementares de forma automática, colaborando para mais compras e que se complementam. </p> <p> Entenda as preferências do seu consumidor e ofereça produtos de forma mais assertiva. </p> </Card> </GroupCardsRight> </GroupCards> </Container> ); } export default Vendas; Vale ressaltar que, estou chamando um componente dentro do outro:

import React from "react"; import styles from "../../Sass/components/Sibteali.module.scss"; import Typewriter from "typewriter-effect"; import { ReactComponent as HeroSvg } from "../../Resources/heroNew.svg"; import { useState, useEffect, useRef } from "react"; import gsap from "gsap"; import { MotionPathPlugin } from "gsap/MotionPathPlugin"; gsap.registerPlugin(MotionPathPlugin); export default TextAnimation; const GsapHandler = () => { gsap.to("#circle_1",{ duration:20, motionPath:{ path:"#ellipse_1", autoRotate: true }, repeat:-1, }) }; function TextAnimation() { useEffect(() => { GsapHandler(); }, []); return ( <div className={`${styles.display} ${styles.font}`}> <div className={`${styles.text} Text`} style={{ fontWeight: "800", opacity: 0, }} > <div>Hi! I'm Syed Sibteali Baqar I'm a</div> <div style={{ color: "#fcab10" }}> <Typewriter options={{ autoStart: true, loop: true, cursor: "/", }} onInit={(typewriter) => { typewriter .pauseFor(3000) .typeString(" Computer Engineer") .pauseFor(500) .deleteChars(17) .typeString(" Web Developer") .pauseFor(500) .deleteChars(13) .typeString(" Open Source Contributor") .pauseFor(500) .deleteChars(23) .typeString(" Python Developer") .pauseFor(500) .deleteChars(16) .typeString(" Speaker") .pauseFor(500) .deleteChars(7) .typeString(" PC Gamer") .pauseFor(500) .deleteChars(8) .typeString(" Singer") .deleteChars(6) .start(); }} /> </div> </div> <div> <svg className={`${styles.heroImg} starSys`} xmlns="http://www.w3.org/2000/svg" width="855.6" height="578.4" viewBox="0 0 855.6 578.4"> <path id="mainGlobe" d="M763 338c-3 43-22 84-49 119l-3 4-8 9-10 11-9 9-7 7c-29 25-61 46-95 65-66 36-138 64-213 68s-153-18-207-69c-74-69-95-184-65-280 20-64 61-122 116-160s125-55 190-44c53-31 121-32 178-9 31 13 58 32 82 54a344 344 0 0 1 31 34l3 3 11 16 15 23 4 6 3 5a266 266 0 0 1 32 88l2 12a175 175 0 0 1-1 29Z" transform="translate(0 -52)" style={{fill:"#3f3d56"}}/> <path d="M568 403 420 279l144 129a3 3 0 1 0 4-5Z" transform="translate(0 -52)" style={{fill:"#f0f0f0",opacity:".30000001192092896",isolation:"isolate"}}/> <g id="smallGalax"> <circle cx="227.2" cy="198.7" r="89" style={{fill:"#f2f2f2"}}/> <path d="M307 245a81 81 0 1 1-53-76 81 81 0 0 1 53 76Z" transform="translate(0 -52)" style={{fill:"#fff"}}/> <circle cx="211.2" cy="165.7" r="25" style={{fill:"#e4e4e4"}}/> <path d="M303 222a25 25 0 0 1-27-41 81 81 0 0 1 27 41Z" transform="translate(0 -52)" style={{fill:"#f2f2f2"}}/> <circle cx="252.2" cy="219.7" r="9" style={{fill:"#e4e4e4"}}/> <path d="M216 323a8 8 0 0 1-1 2 82 82 0 0 1-17-4 9 9 0 1 1 18 2Zm-53-82a18 18 0 0 1-17 18 83 83 0 0 1 2-36 18 18 0 0 1 15 18Z" transform="translate(0 -52)" style={{fill:"#f2f2f2"}}/> </g> <g id="stars"> <circle cx="606.1" cy="156.4" r="3.7" style={{fill:"#6c63ff"}}/> <circle cx="571.9" cy="67.8" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="224.9" cy="491.8" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="584.2" cy="279.5" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="305.1" cy="298.4" r="3.7" style={{fill:"#6c63ff"}}/> <circle cx="266.9" cy="383.8" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="486.9" cy="45.8" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="357.9" cy="506.8" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="325.9" cy="65.8" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="381.9" cy="170.8" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="296.2" cy="428.5" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="549.2" cy="442.5" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="437.2" cy="316.5" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="494.2" cy="170.5" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="597.8" cy="240.6" r="4.3" style={{fill:"#ff6584"}}/> <circle cx="423.8" cy="98.6" r="4.3" style={{fill:"#ff6584"}}/> <circle cx="423.8" cy="393.6" r="4.3" style={{fill:"#ff6584"}}/> </g> <path d="M691 470a8 8 0 0 0-7 6 7 7 0 0 0 0 2v12l9-9 10-11Z" transform="translate(0 -52)" style={{fill:"#6c63ff"}}/> <path id="ellipse_1" d="m719 533-43-2c-79-5-183-22-290-49s-207-60-280-93c-35-16-62-31-80-45-20-15-28-28-25-38 5-21 50-25 88-25v3c-52 0-82 8-86 23-4 18 34 47 105 79s171 66 279 93 210 44 289 49 125-2 130-21c4-16-22-38-72-64l1-3c37 19 79 46 74 68-3 10-16 18-40 22-14 2-31 3-50 3Z" transform="translate(0 -52)" style={{fill:"#6c63ff"}}/> <g id="smallGalax2"> <circle cx="681.3" cy="182.3" r="34.4" style={{fill:"#fff"}}/> <path d="M682 200a35 35 0 1 0 35 35 35 35 0 0 0-35-35Zm0 68a34 34 0 1 1 34-34 34 34 0 0 1-34 34Z" transform="translate(0 -52)" style={{fill:"#2f2e41"}}/> <path d="M651 243a1 1 0 0 1 0-1 34 34 0 0 1 8-28 1 1 0 0 1 1 0 1 1 0 0 1 0 1 32 32 0 0 0-8 27Z" transform="translate(0 -52)" style={{fill:"#2f2e41"}}/> </g> <path d="M717 318h-58a8 8 0 0 0-8 8v128a48 48 0 0 0 26 43l7-7 9-9 10-11 8-9 3-4c27-35 46-76 49-119a64 64 0 0 0-46-20Z" transform="translate(0 -52)" style={{fill:"#2f2e41"}}/> <path d="M719 345a15 15 0 0 0-10-4 14 14 0 0 0-9 3 5 5 0 0 0-1 1l-48 49-34 35a8 8 0 0 0-1 2 6 6 0 0 0-1 3 7 7 0 0 0 2 5l1 1 10 10a7 7 0 0 0 5 1 7 7 0 0 0 5-2l1-1 12-12 69-71a15 15 0 0 0-1-20Z" transform="translate(0 -52)" style={{fill:"#6c63ff"}}/> <path id="ellipse_2" d="M240 569c-36 0-69-1-98-3-39-4-70-9-91-16-24-7-36-16-37-27-2-21 40-41 75-54l1 3c-49 18-74 35-73 50 2 20 48 34 125 41 79 6 184 4 294-7s213-29 290-51c74-21 116-44 114-64-1-15-33-28-89-36v-3c41 6 90 17 92 39 1 11-9 22-30 34s-49 22-87 33a2037 2037 0 0 1-486 61Z" transform="translate(0 -52)" style={{fill:"#6c63ff"}}/> <circle id="smallGalax3" cx="529.4" cy="54" r="9.4" style={{fill:"#e6e6e6"}}/> <circle cx="19.1" cy="381.4" r="17.5" style={{fill:"#e6e6e6"}}/> <circle id="circle_1" cx="87.4" cy="228.9" r="17.5" style={{fill:"#6c63ff"}}/> <circle id="circle_2" cx="838.1" cy="382.4" r="17.5" style={{fill:"#6c63ff"}}/> <g id="smallPlanets"> <circle cx="127.1" cy="56.4" r="10.7" style={{fill:"#ff6584"}}/> <circle cx="77.1" cy="462.4" r="10.7" style={{fill:"#ff6584"}}/> <circle cx="807.1" cy="287.4" r="10.7" style={{fill:"#ff6584"}}/> </g> <circle cx="645.1" cy="546.4" r="17.5" style={{fill:"#e6e6e6"}}/> </svg> </div> </div> ); } In the above code i want to animate a planet ( Circle or Ellipse having id="circle_1") along a path ( id= ellipse_1 ) but the circle is not animating on given path as expected. here is the picture for reference i want circle to move along elliptical path as shown in picture. Note: Sorry for not giving codepen as i am working locally on my machine. Github Link: https://github.com/sibteali786/Portfolio_Animated Component Name: TextAnimation.js directory: src/components/Animated_components

Hey there folks! I just started exploring with GSAP in a new project and absolutely fell in love with the capabilities this library offers.It was going all good till i ran into a problem with the Scrolltrigger setup. So i am currently working on a nextjs single route project where the page is sectioned (components) in different parts and has navigation to scroll up and down on the page. I am using scrollTrigger to mark active nav based on which section is visible. There is one sections with two components (one Component for mobile view and the other for bigger screen) which is loaded based one screen size which is causing the problem, when initially the page loads it works fine but when resizing the window and mobile view component loads its scrollTrigger its Start position locks on top of the document even after refresh(). i tried my best to troubleshoot the problem in different ways. For other sections i used Scrolltrigger.matchMedia() to load different scrolltrigger position for different screen size and it works for other sections, this particular section is loaded conditionally and that's causing the glitch, and i'm not sure how to fix this. Demo Link: https://codesandbox.io/s/scrolltriger-navigation-to5kn?file=/src/App.js

Hi, I'm trying to implement a basic ScrollTrigger animation on Nextjs. It's basically changing sidebar background based on current position of scroll. You can check it's implementation here: Introduction - Budget Basics | Open Budgets India. Problem is initial load of page, which messes up the the start/end of scrolltrigger but resizing the browser fixes the position. I tried some solutions from this post: ScrollTrigger Unexpected Behavior with Smooth Scrollbar in React/NextJs - GSAP - GreenSock but they are not working in my case. All of the code is available here: budget-basic-next/[chapter].js at main · PixeledCode/budget-basic-next (github.com) but basically what I'm doing is useEffect(() => { gsap.registerPlugin(ScrollTrigger) setTimeout(handleSidebarAnimation, 100) return () => { ScrollTrigger.refresh() if (ScrollTrigger.getById('st-id')) { ScrollTrigger.getById('st-id').kill() } } }, []) and the function is function handleSidebarAnimation() { const articles = gsap.utils.toArray('article') articles.forEach((article) => { let sideLink = document.querySelector( `li[keyid=${article.getAttribute('id')}]` ) gsap.to(sideLink, { scrollTrigger: { markers: true, trigger: article, id: 'st-id', start: 'top 22%', end: 'bottom 18%', refreshPriority: 1, toggleActions: 'restart complete reverse reset', onEnter() { sideLink.classList.add('activeSidebar') }, onLeave() { sideLink.classList.remove('activeSidebar') }, onEnterBack() { sideLink.classList.add('activeSidebar') }, onLeaveBack() { sideLink.classList.remove('activeSidebar') }, }, }) }) } I know I'm probably doing something wrong and it's dom order which is creating issues on initial load (eg: coming from home page to the page with sidebar and animation.) but I am not able to find where. Any help is appreciated!

please guide how can i write that when scroll down page , wipe scroll happen from left to right but i want scroll happen like bars in page

Hello Folks, Been having a hell of a frustrating time trying to combine GSAP with React. I'm fairly new to both technologies. I'm basically doing a fetch request to get data from a json file (public/data.json) and mapping it into a div in the Test.js component. I just cant seem to animate anything thats returned in the response with GSAP. From everything I was able to find online, it seems I need to use useRef() with GSAP. Any help would be greatly appreciated. I've created a code sandbox here: https://codesandbox.io/s/musicapp-with-react-and-gsap-odjxq?file=/src/Test.js

Hey folks, I found this Codpen and would love to achieve this in React using Hooks, but having a little problem. Does anyone have this sample in React Hooks?

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:

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