Search the Community

Hi, The demo you're linking uses clip path and a timer. For that you can use GSAP Delayed Call: https://gsap.com/docs/v3/GSAP/gsap.delayedCall() This is a very useful tool for working with Clip Path. https://bennettfeely.com/clippy/ Here is a simple demo: https://codepen.io/GreenSock/pen/eYaZZmL Last bu not least you should check this thread by @mvaneijgen about masking: Hopefully this helps. Happy Tweening!

Hello everyone! We're building a website using GSAP with ScrollTrigger, ScrollTo and ScrollSmoother. We noticed that if you refresh the webpage after scrolling (so not when its on top) the pinned sections completely broke. Here's the website we're building: https://terramata.croma.site/it/ Looks like the page height is not calculated propely after a refresh. Do you have any idea how to fix this? (Tested on CHROME) Thanks!

Good news! When I did the initial installation on a different project as a GSAP Club member I had no problems with the Club plugins auth via .npmrc and the dotenv that Vercel uses for environment variables. It worked just fine. Despite following your directions, I was unable to completely remove/change something (can't figure out what) that kept bringing up the 'module not found' error when I reinstalled in the project I referenced to you initially. So I just created a new repo for that client with the Club auth and moved in the modules, so I'm good now. Thanks for all your help. I'm very excited about using GSAP to raise the level of my designs!

I have an issue with how the timelines act They run fine at the initial start, but when I want to start another timeline and then start the first one again, it slows down. I can see that this is because I'm not killing the existing timelines(?), but I'm too dumb to figure out why. https://stackblitz.com/edit/stackblitz-starters-rzarxd?file=app%2Fpage.tsx

Hello! I am new to GSAP and I'm struggling to create this animation. I kinda have the animation down to what I want: I want "section 1" to become smaller and animate so it's hidden behind the sticky "header". The logo text should animate so it becomes smaller and "fades" in behind the logo in the "header". The animation should start when the user scrolls down. I want the "section 1" to be hidden after it has animated so if the user scrolls up again it should not be displayed. But I have some problems: How do I hide "section 1" after it has animated so it doesn't show again when scrolling back up? If I use pin or translateY there is a big white space after "section 1". Cused by the aniamtion placeholders created by GSAP? What am I doing wrong? I'd appreciate if someone could give me some hints. Thanks! My demo: https://codepen.io/andreasnylin/pen/OJYyGxR

Hi everyone. We're fairly new to GSAP and currently implementing scrollSmoother for a more 'app like' scroll experience. However, we've noticed an issue with SwiperJS which is used to power a carousel on our site. It currently breaks the 'coverflow' effect we are using. The effect no longer takes effect on load, but is restored when interacting with the slider (when browser is not scrolling). However, upon scroll, the effect is removed again. I believe I've isolated this to how scrollSmoother library effects elements using CSS transform, as the CSS applied to swiper is different if scrollSmoother is enabled or not. See below: With SS enabled: translate: none; rotate: none; scale: none; transform: translate(0px, -27.15px); Without SS enabled: transform: translate3d(0px, 0px, 0.462524px) rotateX(0deg) rotateY(0deg) scale(1); This seems unusual but an obvious first step to investigate. Can anyone provide any insight?

Thank you for your clear answer : I learnt things with it (I apologize for the delay of my answer : I went to holidays the past weeks.) Nevertherless, I'm facing another problem and unfortunately, my skills with this library are not enough advanced to solve this. I hope someone here can help me and explain what i'm doing wrong. I join to this topic a codepen and a video that show what i'm expected I have a page with 3 distinct blocks. The first and third ones are blocks with content. the second one is a vertical slideshow and it's where ScrollTrigger comes in. When we arrive at the second section, I want the slider staying fixed in the middle of the screen and when I slightly scroll towards bottom, we pass to the next slide. When each slide is passed, the window continues to scroll as normal. Of course, by scrolling to the top of the screen, we have to get the same behaviour but in reverse. With my code, i have a vertical slideshow which takes the whole height of the screen but i can't do a slideshow that takes a defined height. When I try to limit that height, things don't works like I want. The previous message in this topic helped me to better understand how scrolltrigger works and must be used : thanks a lot for that ; I used the code for inspiration for my own code but sadly i can't reach my needs. I hope someone her could enlight me and help me to progress in my ScrollTrigger learning. Thanks a lot. A video showing what i try to do : https://drive.google.com/file/d/1qg6O92_WfFFozMP9UXY616X4VUDMk3Hu/view?usp=sharing My CodePen : https://codepen.io/alain-nobilito/pen/MWdKNVr

Hello, For my final university college project I want to create a "Your own adventure webcomic". I've recently started my React journey, and I wanted to animate some stuffs in this project. Here you can access a codesandbox for a better understanding for what is coming. I think that I have a misunderstanding of how the scope of useGsap works. Here is my problem, I have a parent component (StoryNarrative) and its child (StoryFragment). StoryNarrative create multiple iteration of StoryFragment. It is important to also note that a new StoryFragment is created whenever the state displayToNumber changes. displayToNumber is a number that changes everytime that the user clicks on a button. It tells StoryNarrative to loop StoryFragment based on an array from 0 to displayToNumber. I want the scope to be a div within the last iteration of StoryFragment that has been created. In order to do so, I have created a ref array (animatedRef) that refers every div. Once done, I have written that the scope should be the last element created. I thought that I could have two different ways to do so. Use animatedRef.current[animatedRef.current.length - 1] or animatedRef.current.[displayToNumber]. But it does not work as I thought. The console shows that for some reason, even after that a new div is created, React keeps using the old length for the first build of the component before changing when I use "animatedRef.current[animatedRef.current.length - 1]" but it does not do so when I use animatedRef.current.[displayToNumber]. But the problem is, however I write animatedRef.current.[displayToNumber] or animatedRef.current[animatedRef.current.length - 1] as the scope, it never refers to the last element created. With animatedRef.current[animatedRef.current.length - 1] it animates the element before the last and with animatedRef.current.[displayToNumber] it seems like the scope does not work at all. So if anyone have any idea of why this is happening please let me know. English is not my mothertongue so I may have done some mistakes, if something is not clear enough please let me know. And thanks in advance for your answers.

@Rodrigo your codepen earlier worked but now the issue I am facing another issue. the START always appears below even after duplicating your codepen in my project. I still find it below the boxes. is there a way I can move the start to when the white background hits the top of the viewport? I have start: "top top" set but still not working for me

Hm, I'm not quite sure what you mean. I'm not seeing any jump at all. Please also keep in mind that SplitType is not a GreenSock product, so we can't really support that here. Is there some secret to seeing this "jump" that you're describing?

@Rodrigo Errors: yarn add gsap@npm:@gsap/shockingly does not work: YN0000: ┌ Resolution step ➤ YN0001: │ Error: gsap@npm:@gsap/shockingly isn't supported by any available resolver

Hi @ElevateBrands. I am a software engineering student and game developer. I just finished a project on this specifically and am happy to help you out. Not really looking for payment, happy for resume cred. Here is the project: https://greensock-demo.vercel.app Please view in 1920x1080 as I didn't have time for media breakpoints.

Hello again, There is something else that I wanted to understand. I managed to resolve the problem but I do not understand how it resolved it. I wanted to animate a div, in order to do so I have first created a ref element in the parent component and I have attached it to this div (Which stands in the children component). I have animated the div with a timeline and useGSAP (that are also in the parent component) and I have said that onComplete I want to revert the animation. But I have noticed two weird things: - first, when the component is mounted for the first time in strict mode, I saw that the ref returned undifined instead of the div element before showing the div element once mounted a second time. - secondly, when I have added to revert the animation, the animation did not play at all. I manage to resolve this issue by passing the ref and the useGSAP directly to the children component, but I do not understand how it resolved the problem so if anyone know what happened please let me know. How the code was before: Parent component: const animatedRef = useRef(null); const timelineAnimationRef = useRef( gsap.timeline({ repeat: 6, repeatDelay: 0, onComplete: () => { console.log("animation finished"); if (animatedRef.current && timelineAnimationRef.current) { // timelineAnimationRef.current.revert(); } }, }) ); useGSAP( () => { if (animatedRef.current) { console.log(animatedRef.current.id); } if (animatedRef.current && animatedRef.current.id == 2) { timelineAnimationRef.current .to(animatedRef.current, { rotate: "-5deg", duration: 0.06 }) .to(animatedRef.current, { rotate: "5deg", duration: 0.06, }); } }, { dependencies: [displayToNumber, content] } ); return ( <div id="story" className="container w-4/6 flex flex-col items-center"> {content.map( (contentObject, index) => displayToNumber >= index && ( <StoryFragment animatedRef={animatedRef} /> ) )} </div> ) Children component: return ( <div ref={animatedRef} id={content.id} className={`w-full h-min relative overflow-hidden`} > </div> ) Now everything has been sent to the root of the children component

Hi, hope everyone is doing great. I would like to be able to achieve an effect that is done with scrollmagic but with scrolltrigger. It layers 2 images on top of each other and the second image is hidden. But when you scroll the second image and section is revealed on top of the first section. You can understand the effect more from this gif - I hope its not too much of a trouble and I can get a starting point here as I am not very good with code. Thank you so much. Have a great day!

Hello again, It's been very helpful. After I replaced useEffect with useGSAP, I realized it's also not working on local properly, it was a visual illusion. I cleaned the code and solved the issue. Thanks for your help 🙏

I created a custom scrollbar with this setup: - lenis for smooth scroll - a few lines of css to hide default scrollbar - GSAP scrollTrigger to sync the thumb position with the scroll position - GSAP Draggable to enable scroll by dragging the thumb It works great, but if I resize the window (so that the height changes) it does not work anymore. My idea was to kill the scrollTween and the reinitiate it on window resize, but it doesn't seem to work. Sometimes it does on first resize but then if you keep resizing it starts messing up. Only thing that works is that the thumb height is properly resized IMPORTANT: To see the problem I'm trying to point, open the codepen and try resizing the window a couple times, then try to scroll up and down the whole page

Hello, I've started my React journey recently. For my final university college project, I want to create a "Your own adventure webcomic". I want to animate the every panels and in order to do so I had to use GSAP or "useGSAP" (I am proud of this one). I have watched those two videos to understand how it works: https://www.youtube.com/watch?v=DwU72sp_gGI https://youtu.be/l0aI8Ecumy8 But I am not sure if I have fully understood how it works. useGSAP automatically revert the animation at the end, so does it mean that I am not supposed to see things like this once the animation finished? Or is it only when the component is dismounted? I also wanted to ask if I use it properly. So here is an example of how I have used it in my code: const [isMounted, setIsMounted] = useState(false) const shakingRef = useRef(gsap.timeline({ repeat: 2, repeatDelay: 0 })); useEffect(() => { setIsMounted(true); }, []); useGSAP( () => { if (isMounted == true) { if (healthRef.current > elvan.health) { shakingRef.current .to(elvanRef.current, { xPercent: -5, yPercent: -5, duration: 0.1 }) .to(elvanRef.current, { xPercent: -0, yPercent: -0, duration: 0 }) .to(elvanRef.current, { xPercent: 5, yPercent: 5, duration: 0.1 }) .to(elvanRef.current, { xPercent: -0, yPercent: -0, duration: 0 }); } } }, { dependencies: [elvan.health], scope: elvanRef.current, } ); Thank you in advance for your answer (And sorry if I have made some mistakes, English is not my mother tongue).

Hi @philcharitou and welcome to the GSAP Forums! Just a syntax issue! In keyframes land the easing for each keyframe is easeEach not ease: // Wrong gsap.to(".animate-sway", { keyframes: { y: [0, 18, 8, -8, 0], rotate: [-8, 3, 8, -3, -8], ease: "none", }, repeat: -1, duration: 3, }); // Right gsap.to(".animate-sway", { keyframes: { y: [0, 18, 8, -8, 0], rotate: [-8, 3, 8, -3, -8], easeEach: "none", }, repeat: -1, duration: 3, }); https://gsap.com/resources/keyframes/#percentage-keyframes---v39 Here is a fork of your demo: https://codepen.io/GreenSock/pen/YzbwwYz Hopefully this helps. Happy Tweening!

I am trying to rotate Image in the example i shared but its too vague, how i can make it more good? like interms of 3d Example: https://stackblitz.com/edit/stackblitz-starters-pmqxre?file=app/page.tsx

Hi, The main issue here is that you're pinning an element whose height is not the height of the viewport: .service-slider_wrapper { overflow: hidden; max-height: 500px !important; } const slider = document.querySelector(".service-slider_wrapper"); const pin = gsap.to(rightSections, { yPercent: -100 * (rightSections.length - 1), ease: "none", scrollTrigger: { trigger: slider, pin: true, invalidateOnRefresh: true, start: "center center-=100", scrub: 1, end: () => "+=" + (slider.offsetHeight || 0), markers: false } }); Because of the way pinning works, that creates the extra space after that element. The solution is to wrap that element and the next with an extra element and pin that one: <div class="pin-wrapper"> <div class="roadmap-sec"> </div> <div class="bottom"></div> </div> const pin = gsap.to(rightSections, { yPercent: -100 * (rightSections.length - 1), ease: "none", scrollTrigger: { trigger: slider, pin: ".pin-wrapper", invalidateOnRefresh: true, start: "center center-=100", scrub: 1, end: () => "+=" + (slider.offsetHeight || 0), markers: true } }); Here is a fork of your demo: https://codepen.io/GreenSock/pen/PovZoRv Hopefully this helps. Happy Tweening!

Hi @Guillaume Ducuing welcome to the forum! I cant see anything obvious from just the code snippets. Codepen isn't always the best platform to get your demo ready, have your seen our Stackblitz starter templates these gets you up and running in most of the major frameworks. What I can see is this line in your CSS `transition: all 0.35s ease;` which always is a red flag. If you have an animation with GSAP on an element and this line of CSS will interup all animations and things will break. Due to not having a demo I'm not able to test it for you to see if this fixes the issue, but personally I would not use the word 'all' and always define the properties I want to transition and never transition an property that GSAP is also animating. Hope it helps and if not try and see if you can reproduce the issue in one of our stackblitz templates and we will be able to help you debug and happy tweening!

Hey Jack, Thanks for getting back, was bit sick with cold then on another job for a bit, haha yea tricky to almost impossible 😜 also asked Gemini AI as well and it said the x,y coords are not made available but offered a few workarounds but not pursued them as yet - did try a few crude ideas by moving a container around at certain time intervals but it was a bit rough and made the scrolling experience unpleasant - maybe if spent more time could smooth that out but actually be less hastle to adjust the svg a bit to play nice with scroll trigger and motion path 🤗 If do find a way will update the post, cheers, Paul

I upgraded to a Premium account to use Club Plugins. They installed locally and function correctly, but when I build with Vercel I keep getting this error: Module not found: Can't resolve 'gsap/MorphSVGPlugin' https://nextjs.org/docs/messages/module-not-found In my .tsx file, I am importing and registering import { MorphSVGPlugin } from "gsap/MorphSVGPlugin"; if (typeof window !== "undefined") { gsap.registerPlugin(MorphSVGPlugin, useGSAP); } and my .npmrc file is in place: always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=${GSAP_TOKEN} I also added GSAP_TOKEN to my Vercel Environment Variables. I have gone through the Forum and tried any appropriate fix, but I'm still at a loss. What am I missing?! Grateful for any assistance. Thanks!

Hi there, sorry to say there's not really anything you can do to mitigate it. It's not down to GSAP persay, more that you can't have fixed elements inside a transformed container (like the ScrollSmoother container). It's a web platform thing that we can't change. The options are either move the elements outside the scroller in the DOM, (or reparent them on interaction if they're modals?) or use a different solution like Lenis, Lenis doesn't smooth all inputs though, soif someone drags the scrollbar or tabs down the page it won't be smooth. It's also a third party solution so we can't speak for compatibility. Sorry that you've run into this and good luck getting it fixed, happy to answer any questions you may have.

Thanks for the replies, guys! I will definitely try the useGSAP() hook. I was convinced that this is not a GSAP issue in any way; I was just trying to do a brainstorming here. And it helped. I found the issue in my code. I was creating the animation in my React component outside of the useEffect() hook. Now it's working properly. Thanks for your quick responses 💪!