Search the Community

First of all, congrats for all stuff GSAP! This is a wonderful piece of work! Secondly, I've encountered issues with Draggable, while using React 16.5: Using Draggable.create(target) doesn't allow the user to drag the element at all. A 3d transform is set on the element, having all 0px values, but the element itself doesn't move. The onDrag / onDragEnd / onDragStart handlers aren't called. On the other hand, the onPress handler is called, but two times every click, once with a PointerEvent type event payload, and with a MouseEvent, the second time. Also, it's important to point out that using GSAP 1.19.1 / 2.0.0 / 2.0.2 with React 16.4 and lower doesn't reproduce the issue, nor does it cause the onPress handler to be called twice. It only gets called once, with a PointerEvent. However, I was able to reproduce this issue using GSAP 1.19.1 / 2.0.0 / 2.0.2, with React 16.5. If there's anything more needed, I'll happily provide more details. componentDidMount() { const lis = document.getElementsByTagName('li'); Draggable.create(lis, { cursor: 'grab', onPress(event) { console.log(event); }, onDragEnd() { TweenMax.to(this.target, 0.5, { x: 0, y: 0 }); } }); } Thanks in advance!

Hi all! I am running in a problem with this animation (Stackbliz), an infinite looping horizontal section with a snapping functionality (which is causing the problem). The animation looks working properly, but as soon as I change page (by clicking in one of the images) I run into a scroll issue. When I am in the new page, if I scroll for a bit and then stop scrolling, the page get scrolled to the top. The issue is inside this part of code. Looks like this function is running even when the component is not rendered anymore: ScrollTrigger.refresh() ScrollTrigger.addEventListener("scrollEnd", () => scrollToOffset(scrub.vars.offset)); function scrollToOffset(offset) { let snappedTime = snapTime(offset), progress = (snappedTime - seamlessLoop.duration() * iteration) / seamlessLoop.duration(), scroll = progressToScroll(progress); if (progress >= 1 || progress < 0) { return wrap(Math.floor(progress), scroll); } trigger.scroll(scroll); } Can be that gsap.context is not able to cleanup properly this part of code? I am cleaning up like this: return () => { ctx.revert(); ScrollTrigger.getAll().forEach(t => t.kill()); } Thanks in advance!

Hi there. I am trying to create a bottomsheet. As you guys can see, there is a scrollable div element inside draggable element. If scrollTop is 0 then the element should be dragged toward bottom side when users drag or touch down. If scrollTop is more than 0 then it should scroll and should not be dragged. But the problem is that I cannot solve this issue. I searched about this issue and i got the hint that I should use allowEvnetDefault option to fix this issue. And I tried to solve this issue but i can't. How can I fix this issue?

Hello ! I'm aware this is probably an easily fixable mistake, but I'm still very new to web development, especially using gsap. Basically I have a navbar that I want to open and close with onClick() on the same button in React. I tried following multiples tutorials and forum posts, but I am still struggling to make it work like I want it to. I'd appreciate any help, tips or answers. Thank you in advance for your time ! (I also don't really use codepen but I am more than willing to try and use it, if it's of use for you) function Navbar() { const [navbarIsOpen, setNavbarIsOpen] = useState(false); function NavbarAnimate() { const tl = gsap.timeline({ reversed: navbarIsOpen, }) tl.fromTo(".navbar-link", { x:-400, opacity:0 },{ x:0, opacity:1, stagger:-0.02 }) tl.fromTo("#navbar", { backgroundColor: "rgb(12, 17, 23, 0.0)" },{ backgroundColor: "rgb(12, 17, 23, 0.8)" }) tl.reversed() ? tl.play() : tl.reverse() } And here is the onClick() I use on my button : <i className="..." onClick={() => { setNavbarIsOpen(!navbarIsOpen); NavbarAnimate(); }}/> Thank you again for taking the time to check out my problem, and sorry if this is a redundant and recurring mistake ! (Excuse my english as I'm not a native speaker)

I have a menu drawer that has a ul with 6li's in it next.js, react, gsap, tailwind. I need to animate them, currently I am creating timelines for each li and creating refs then on mouse enter and mouse leave on the lis I am manipulating the specific timeline (playing and pausing it) using the index. I wanted to know if this is the most optimised way of doing this or not? MenuDrawer.js

I have two scrolltrigger based pins in separate React components, WorkContainer.jsx and SkillsWrapper.jsx. Both pieces of pinned content appear to jump positions on enter. The second pin, in SkillsWrapper, will also jump randomly on page refresh and will appear before or after it's pinned content section. I've tried to remove all padding/margin to the affected sections, added context, and added "anticipatePin" to both scrolltriggers but the issue persists. See useEffect for WorkContainer: useEffect(() => { let ctx = gsap.context(() => { // Pin featured work text ScrollTrigger.create({ trigger: '#featured-work-text', start: 'top top', end: 'bottom 60px', pin: true, // markers: true, anticipatePin: 1, }); const videos = gsap.utils.toArray('video'); videos.forEach(function (video) { ScrollTrigger.create({ trigger: video, // scroller: ".appVideos", start: 'top 65%', end: 'bottom 0', // markers: true, onEnter: () => video.play(), onEnterBack: () => video.play(), onLeave: () => video.pause(), onLeaveBack: () => video.pause(), }); }); }, component); // <- selector scoping return () => ctx.revert(); }, []); See useEffect for SkillsWrapper: useEffect(() => { let ctx = gsap.context(() => { let mm = gsap.matchMedia(); mm.add( { isDesktop: '(max-width: 768px)', isMobile: '(min-width: 768px)', }, (context) => { // eslint-disable-next-line no-unused-vars let isDesktop = context.isDesktop; // Sets Scrolltrigger pin for circle let tl = gsap.timeline({ scrollTrigger: { trigger: '#circle-container', start: 'top top', end: '+=100%', pin: isDesktop ? false : true, pinSpacing: false, toggleActions: 'play none none reverse', anticipatePin: 1, invalidateOnRefresh: true, // markers: true, }, }); // ... additional commented out tl } ); }, component); // <- selector scoping return () => ctx.revert(); }, []); Please see attached video showing my issue and stackblitz links to project below: Stackblitz project editor Stackblitz application preview Any help with resolving this issue would be greatly appreciated. scrolltrigger-issues-small-2.mp4

Hi I am having a problem using ScrollTrigger with React Router. I have two pages in my website Home and About. The animation on homepage works perfectly but when I navigate to About page I get this error. "Node.removeChild: The node to be removed is not a child of this node" If I visit About Page by direct url without using router then the Animation on About page works fine but If I navigate to Home page from About page then the same error happens again. I am new to Scrolltrigger and also react and I've been trying to solve this for days but I couldn't find any solution on the internet. That's why I posted here. Anyway below is the url to the StackBlitz code of my project. https://stackblitz.com/edit/stackblitz-starters-bldghh

Hey! I'm Lucas. A full-stack developer that works with Next.js, the MERN stack (MongoDB, Express.js, React, and Node.js), and, of course, GSAP! I have experience designing, developing, and shipping websites, apps, and solutions that reached some thousand users. From marketing campaign landing pages to proprietary e-commerce platforms. I am currently open to freelance projects as well as part-time and full-time positions. More details about me and some of my projects are available on my personal website: https://www.lucaslamonier.com/ If you're in need of some animations, full websites, web apps, or even some ideas, please do get in touch! My contact info is on the website and you can reach me by replying to this post or sending me a DM. I have no timezone restrictions. Thanks for reading!

const drawImage = useCallback(() => { const image = images[defaultFrame.frame]; const canvas = document.querySelector("canvas") as HTMLCanvasElement; // window.innerWidth canvas.style.width = `${width}`; // window.innerHeight canvas.style.height = `${height}`; const context = canvas.getContext("2d") as CanvasRenderingContext2D; // window.innerWidth context.canvas.width = width; // window.innerHeight context.canvas.height = height; context.clearRect(0, 0, canvas.width, canvas.height); // Draw the image on the canvas //, width, height context.drawImage(image, 0, 0, canvas.width, canvas.height); }, [defaultFrame.frame, height, images, width]); const initGSAP = useCallback(() => { gsap.to(defaultFrame, { frame: frameCount - 1, snap: "frame", ease: "none", scrollTrigger: { scrub: true, pin: "canvas", }, onUpdate: drawImage, }); gsap.fromTo( ".game", { opacity: 0.1, }, { opacity: 1, scrollTrigger: { scrub: true, start: "0%", end: "100%", }, onComplete: () => { // do stuff }, } ); images[defaultFrame.frame].onload = drawImage; }, [defaultFrame, drawImage, images]); I want to reduce the speed of my gsap image animation on scroll, please how can I achieve this? Here a video

Hey all, What I'm trying to do: Use scrolltrigger to control the progress of the lottie file Use scroll trigger to fade in text blocks sequentially, then fade the text block up and out at defined times on the timeline What's happening: Even though I set the text to not be visible initially it still all appears. Can't properly link the animation of the lottie and text. Can't seem to get the text to fade out using stackblitz (but it fades out one by one locally 🫠) Any assistance greatly appreciated Minimal demo: https://stackblitz.com/edit/react-fra2qi?embed=1&file=src%2FApp.js

As you can observe in the code pen link, both the instances get triggered on interacting with any one of them. What concept am I missing? I guess this is because both button instances share the same ref. I am unsure. What is the gsap way of doing this? I read gsap context, This gsap thread, and gsap with react basics But I am still confused.

my animation lags on load , but doesn't when I go other pages and switch back to the home page

This is how it looks on my localhost: 20230629-0604-06.4300693.mp4.168f158111a67ec4dbeac6b2db47861d (1).mp4 This is how it looks on my hosted version: Recording 2023-06-29 113710 (1).mp4 Any help why is it not working with vite tsx? I have another project in react jsx where this issue is not faced.

I want this kind of effect in react : https://codepen.io/admireasia/pen/gOQmZmv . Wanted above pin effect in react but not working here : https://codesandbox.io/s/focused-blackwell-hkw5p6?file=/src/App.js I have created this codepen and its working fine but not in react (sandbox link above for reaact) but I am not able to understand where I am doing wrong to implement this kind of pin element for atleast 200% but I am getting redudant whitespaces event after using pinSpacing:false and I am also getting triggered element multiple times .when trigger start and end.

useLayoutEffect(() => { const animationContext = gsap.context(() => { const timeline = gsap.timeline(); const timelineButtonOff = gsap.timeline(); timeline.to(".landingOverlay", { opacity: 1, zIndex: 1, duration: 0.1, paused: isButtonClicked, ease: "none" }); timeline.to(marqueeDummy, { duration: 0.3, opacity: 0.4, }); const loopDummy = horizontalLoop(marqueeDummy, { repeat: -1, speed: 0.3, reversed: true }); const loop = horizontalLoop(marquee, { repeat: -1, speed: 0.3 }); timeline.add(loopDummy, 0.1); timeline.add(loop, 0); timelineButtonOff.to(".menuCarousel", { x: '-' + distance, ease: "none", scrollTrigger: { trigger: ".landingScreen", toggleActions: "restart pause reverse reset", start: "center 45%", end: "+=3000", scrub: 0.1, pin: true, pinSpacing: true, }, onReverseComplete: () => { setIsButtonClicked(false); timeline.play(); console.log('timeline has restarted'); } }); if (!isButtonClicked) { timeline.play(); } else { timeline.kill(); timelineButtonOff.play(); } }); return () => { animationContext.revert(); }; }, [isButtonClicked]); <div className='landingOverlay position-absolute' onWheel={handleButtonClick}> {/* landingOverlay content */} <button className='d-block rippleButton' onClick={handleButtonClick}><FaAngleDown /></button> </div> <div ref={landingScreenRef} className="landingScreen"> <div className={`marquee position-relative ${isButtonClicked ? '' : 'rotatedContainer'}`}> <div className="dummyCarousel d-flex flex-row"> {/* dummyCarousel content */} </div> <div className='my-4'> <div className='d-flex flex-row menuCarousel position-relative'> {/* menuCarousel content */} </div> </div> <div className='dummyCarousel d-flex flex-row'> {/* dummyCarousel content */} </div> </div> </div> I am trying to implement a marquee-like animation effect for a menu carousel on the landing screen. The isButtonClicked state changes from false to true when you do handleButtonClick and to false when you reverseCallback. When I reverseCallBack, the state of menuCarousel changes to original but not that of dummyCarousel. What am I doing wrong? Edit 1: I figured that the problem is in using reversed: true for the handleLoop function

Hey Guys! I'm creating a website with React that has a menu button that opens a drawer for mobile/tablet. I'm using the MUi drawer (temporary drawer, left) and it *almost* works great. In Chrome for IOS, there's a bug with css transitions in which if you switch tabs and come back, the animation gets worse and after three times, the animation stops instantly. I came across gsap/motion/react spring, all of which work great with the chrome iOS bug as they don't use css transitions. Problem is my JS skills are weak (slowly improving) and I've no idea how to recreate the MUI drawer from scratch using GSAP. I get by with modifying existing examples. A bit of a long shot but does anyone have any recent codepens that function similar to the MUI example? - Click on the menu, opens drawer. - Click on a close menu button, closes drawer - Click on the remaining body, closes drawer https://mui.com/material-ui/react-drawer/ Thanks in advance if anyone has any examples they can share if they've made any in recent months.

hello everyone, i am having trouble with scrolltrigger pin method. i seem to cannot solved is at all , cannot figure out if its reacts problem or gsap need help pleaseeeeeeeee https://codesandbox.io/s/zen-fast-ogesxo?file=/src/App.js

Hey there! I hope I can find an expert who can help me out. I want to add ScrollTrigger and SplitText to my NextJS project. Inside of this project I'm using the new "App-Router". With that said, the problem occurs. The previous "_layout.js" file is now "layout.js". So to register PlugIns only once, I tried to import ScrollTrigger & Splittext like so: import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' // & gsap/ScrollTrigger doesn't work too import { SplitText } from 'gsap/dist/SplitText' // & gsap/SplitText doesn't work too gsap.registerPlugin(ScrollTrigger, SplitText) This works fine at the first glance. Now I want to setup a Provider which provides all the scroll-animations. When I want to access ScrollTrigger or SplitText it "missing plugin"... so it isn't global.. But when I want to import & register the plugins into my provider I get this error on every page-reload. Sooo I don't know what I can do. Hope somebody of you knows how to solve this problem. Or how to use the plugins probably with React in generall.. And I also have to mention, that those error only appear when is add the code gsap.registerPlugin(ScrollTrigger, SplitText) to the page..

Hello everyone. There is a problem with pinning the element via Scroll Trigger. I do everything according to the documentation, but unlike the example, I have the transform: translate property added for the target element. I tried to apply pinning to any other DOM element to find the problem in my code, but the result is always the same. I can't understand what this behavior is related to. I set the ending position += 100 for the test, initially I do not specify the end property so that the page continues scrolling after the animation, but in this case the translate property becomes about 1700px and it is very difficult to test. the page just breaks Screenshots: https://disk.yandex.ru/d/oAheog2IPXLONA

On clicking the link scrollTrigger in the below error demo and scrolling the section is not being pinned but on manually refreshing the page the it is getting pinned and works fine, on removing any transition animations the pin works as well still works. Here's a link to the same error that I replicated. https://stackblitz.com/edit/nextjs-rdx4ro?file=pages%2Fscroll.js P.S I am a gsap noob and im still learning

I have applied id="smooth-wrapper" and id="smooth-content" by wrapping with div. But it is not working. I followed https://codesandbox.io/s/stupefied-minsky-pzceim?file=/src/App.js:733-752 but couldn't understand how to apply ScrollSmoother in these component based structure.

Hi there, I am using ScrollTrigger a lot, its a fantastic addition! the only issue I've run into so far is cleaning up when using ScrollTrigger.matchMedia() when un-mounting in my React components. I've tried killing all ScrollTrigger instances, and killing timelines individually. simplified setup below: const buildTimeline = () => { // ... setup stuff ScrollTrigger.saveStyles([boxRef.current, mobileRef.current]); ScrollTrigger.matchMedia({ '(min-width: 720px)': () => { if (!boxRef.current) { console.log('boxRef does not exist'); } ScrollTrigger.create({ // config stuff animation: desktopTimeline.current .to( // animations ) }); }, '(max-width: 719px)': () => { if (!mobileRef.current) { console.log('mobileRef does not exist'); } ScrollTrigger.create({ // config stuff animation: mobileTimeline.current .to( // animations ) }); }, }); } useEffect(() => { if (!hasMounted.current) { hasMounted.current = true; buildTimeline(); } return () => { // kill all ScrollTrigger[s] ScrollTrigger.getAll().forEach(t => t.kill()); // try killing individual timelines also mobileTimeline.current.kill(); desktopTimeline.current.kill(); } }, []); This would normally work ok on ScrollTrigger instances generally - or at least it seems to! - but if I'm using matchMedia I'll still get media query change events firing where the component is unmounted (i.e. navigating to a different route). any idea what I'm missing here?

code sandbox link (I was messing with this file and forgot to fork it, so I apologize, the file is now as it should be) In my little basic nextjs demo here (link above), I have set up an idea for a page I have where it would use a fixed position layout as you see here. I have three questions that are hopefully not too long: 1. Is this a good way to set up such a layout with gsap (using stacked, standard flow elements, in this case, the yellow and green lines in the middle of the page (which would be hidden in the actual site) to trigger the scrolling animation) or do you think there is a better way to achieve this? 2. If I scroll any amount of distance and hit refresh, the page doesn't reload from the beginning it just reloads and the scroll bar remains in place. What should I do to make it start back from scratch when I refresh the page? 3. I was trying out smooth-scroller, got it to work and it's very nice of course; however, If I have A setup like this in nextjs with these fixed elements which the smooth-scroller docs say to put outside the smooth content wrapper, I would have the main content in a wrapper (this wrapper would have smooth-scroller) then the fixed elements in their own parent div and then wrap all of that in say a react fragment or div because of course this is react and all components must only render one element. But when I do that smooth-scroller doesn't work anymore, So I'd love to see how smooth-scroller would get applied to this setup. Also, is there a way to make smooth-scroller work in code sandbox?

Hi GSAP community! Hope you're doing well! I would like have an answer about multiple paragraph animated with the SplitText module in react environment. In fact, i'm tryin to make a dialog box with multiple paragraph that I split to make an effect like in a video game. My problem is I would like to remove the previous paragraph before the new one start his animation so that it'll appear at the top of the dialog box. I made a codesandbox (sorry i didn't find a way to make it works with codepen) here : https://codesandbox.io/s/adoring-currying-12sedl? Is there a way to do that ? Thanks in advance.

I am building react project with GSAP. I am trying to create an animated div that will scale up based on scroll. My animation works perfectly on codepen demo. But when implementing it in my project, it sets the markers wrongly. But when I change routes, and come back, the markers automatically get set perfectly. Please watch the video for better understanding, or go to this link https://ayank007.github.io/newportfolio/# Source code: https://github.com/ayank007/newportfolio/blob/master/src/components/Work/index.tsx in line 37 Can anyone please help me, what went wrong. Thank you. Untitled.mp4