Search the Community

Hi there! I'm facing an issue with my scrollTrigger functionality. I have my website with 5 sections and I'm using gsap to jump to the next section and overlap it with the scroll, my problem is that now I need to add redirections in my navbar to each of those sections but the result is not good, I have to repeat my "goToSection" function multiple times to reach from section "2" to section "4" for example. So I want to achieve with one click and one function execution, scrolling to the desired section with no problem I will appreciate any help from you guys! Thank you very much. I drop here a minimal demo of the problem.

Hello, I have a projet on Nextjs with some GSAP for animations. I have created a simple Component for animate list of elements on scroll. But this time I need to make animation on scroll and when I click on "Voir plus". And I couldn't find how to achieve this behavior. If someone can help. Here is the codepen https://codepen.io/maxime-joyes/pen/poGVYzg Thanks

The animation plays while I'm on the page for the first time, after I exit and come back - the animation stops playing I tried: timeline put in useRef gsap.context and subsequently revert Manually clear timeline using kill A simple example that also doesn’t work for me: Here is a link to a site where the text with the same problem is https://next-resume-hazel.vercel.app/ Wait for the full animation and intensity approximately, then go back by clicking on the RESUME title and the text will not animate again. (This post was completely translated using google translator, sorry if anything is not clear) import gsap from 'gsap' import { useEffect } from 'react' export function Component() { useEffect(() => { const obj = { n: 0 } // This will only work while I'm on the page for the first time // If I go to /about, or any other page, and go back, // code block below - will stop working and output the object to the console // Although if you look in _gsap the id of the animation is different from the previous one // Also, not only to but also from, timeline and other things stop working // with which you can smoothly change values gsap.to(obj, { n: 1000, duration: 1, onUpdate() { console.log(obj.n) // 0 - 1000 } }) }, []) return <></> }

There are two components: The first component uses pin, where the pin-spacing height equals the height of this element +=200%. The second component uses start for its trigger and gsap.from animation. When initializing the pin from the first component, it is given a new height, but the start/end positions of the second component are unaware of this, causing them to execute earlier. This is the main issue, and I couldn't find the correct solution to fix it. I created a minimal example, but for some reason, it doesn't work there ?

So I have created a component transition animation which works perfectly fine on local machine but when i deploy the website on vercel, the animation is very slow. Is there some way to optimize the animation? import React,{useEffect}from 'react' import { useNavigate } from 'react-router-dom'; import { locationBg } from '../../assets' import useLocationContext from '../../hooks/useLocationContext'; import { gsap } from 'gsap'; import MobileFrame from './MobileFrame'; const Location = () => { const navigate = useNavigate(); // Destructing variables from the Location Context const { data,setData, setHasSearched, setInputValue, setSelectedCountry } = useLocationContext(); useEffect(() => { const tl = gsap.timeline(); // Animate the Location component tl.fromTo('.LocationAnimationClass', { opacity: 50, y: 1200 }, // From { opacity: 1, y: 0, duration: 1, ease: 'power3.out' } // To ); // Animate the MobileFrame component tl.fromTo('.MobileFrameClass', { x: '-600%', opacity: 20 }, { x: '0%', opacity: 1, duration: 1.8, ease: 'bounce.out' }, '+=0.2' ); tl.fromTo('.ButtonAnimationClass', { y: '400%', opacity: 0 }, { y: '0%', opacity: 1, duration: 1, ease: 'bounce.out' }, '+=0.2' ); }, []); // This useEffect is used for handling error on the location page useEffect(() => { if (!data) { navigate('/'); } return () => { setHasSearched(false); }; }, [data, navigate, setHasSearched]); // This function is handling the reset Button const handleReset = () => { setData(null) setSelectedCountry(null) setInputValue(null); navigate('/'); } return ( <> <div className='LocationAnimationClass overflow-hidden relative h-screen flex flex-col gap-[30px] md:gap-[40px] xl:gap-[20px] 2xl:gap-[90px] justify-center items-center bg-cover bg-center' style={{backgroundImage: `url(${locationBg})`}}> <div className='bg-black w-full h-full bg-opacity-30 absolute top-0 left-0'></div> <div className='MobileFrameClass'> <MobileFrame/> </div> <button className="ButtonAnimationClass bg-[#33c2cc] px-10 py-3 rounded-full font-noto-sans font-semibold text-3xl z-10 text-white" onClick={handleReset} > Reset </button> </div> </> ) } export default Location

I've created a custom cursor whose X and Y gets updated on change of mouse. Using React and GSAP. The cursor also changes in size when it is hovered on a specific text. However, the hover state is not consistent and glitches at the time of using it. I'm sharing the codesandbox link where the same problem is replicated. Any and every help is appreciated, thank you. Codesandbox Link: Link

Hello All I'm trying to make and endless loop with two rows going in opposite directions. The first row works fine, but the second row has a bug where there is a gap of unrendered elements after Infatuation. Any ideas on what's going on? Code is Below (Apologies, but I have issues making react Code Pens): https://codesandbox.io/s/test-carousel-forked-s5wtub

Hi there! I'm trying to replicate an effect in my snapping scroll, when I scroll up or down there is some kind of stop before the other section apears, and I want with a simple scroll go to the next section. I found a gsap code doing that exactly behaviour that I want but it is using scrollTo and gsap.to, and my code is already different, is there a way to replicate that in my code with the code that I already have? Because I have an "overlaping" effect with "pin: true" that I don't want to lose. https://codepen.io/akapowl/pen/YzxoEab/e9015efd3d44b24f9cce5bef29dee1dd My expected snap behaviour: https://codepen.io/urbgimtam/pen/XWXdypQ My snap behaviour: Thank you! Have a good day.

Hey! I want the behavior to be similar to the one in the video. I use the onComplete method to understand when the circle has increased and horizontal scrolling should work for me. Since mine is a circle shape, I think it would be correct to hide the circle shape and display a container with the same color. In this container, set the width of the first child to 100% and the width of the other to 50%. As you scroll, reduce the width of the first child element to 50%. How to do this correctly? I don't quite understand how to do this correctly. Tell me, how can I catch the middle of the animation in order to display the text? For example, the circle enlarged a little and the text was gradually displayed; for example, you can also see it in the video. It is also not clear to me how to determine the start and end in this code to trigger the horizontal scroll. I specified start and end, but I think that's wrong for what I need. I would like to get a comment on how to create a similar sequence for animation. I believe that it will be enough for me to suggest how to correctly implement horizontal behavior after performing an animation with a circle and simply display the container and I will try to understand how to further connect this chain and I will independently try to change the width for the next animations, and I would also like to get an answer, How can you correctly display text there in the middle of the circle enlargement animation? 2023-10-18 23-59-29.mp4

Hi there! I need some help from you guys. I'm trying to apply the effect in the codepen demo, I have two sections (that contains each one a carousel) and I want the second section cover the first section on scroll (same funcionality as the demo but only with these two sections). I'm writing the scroll trigger code in the first carousel component (don't know if this is the right approach), the problem is that when I try to use the "pin: true" property, my first carousel dissapears or moves to the bottom of my app. I don't have a codepen because I'm using React but I made a codesandbox example in this link: CodeSandbox Link Thank you so much!!

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