All Activity

So I was trying to create minimal page that horizontally when scrolled vertically. To implement these I have used an implementation from https://codesandbox.io/p/sandbox/nervous-pasteur-rws9rp?file=%2Fsrc%2FApp.js%3A82%2C7 which works fine in react js. However, when I try the exact same code in tsx, which you can find here https://codesandbox.io/p/sandbox/vigilant-cookies-6php56?file=%2Fsrc%2FApp.tsx it suddenly started to randomly translate the container to the y direction when scrolled slightly. I have tried many thing but was never lucky to solve the issue

Thanks, that's works! I dont know about useGsap().

hi I did the ccode pen with as little detail as possible and it still doesn't work https://codepen.io/KnozZ-the-scripter/pen/dyLLMoG

I came up with another way of making the radial wipe without needing any functions. I cheated with the mask above my images (it's red in the demo), but it works. https://codepen.io/glenn-ko/pen/YzMgJrV

I edited the demo. Actually, the file you can look through is TruckSimulator.vue. It has video inside. What it behaves now: 1. When video reaches to the top, it starts to play. It's okay. But it continues to go further bottom 2. When refreshing page, scroll position in not reset What I actually expect: 1. When video reaches to the top, its position should be "fixed" so that i can play video by scroll while I keep it in the current screen. Once video is completed, I can continue to go bottom to see other content. 2. If I am in the bottom of page, I should be able to go back to top after refreshing page https://stackblitz.com/edit/nuxt-starter-sv6wqk?file=app.vue Please, let me know if you need more details P.s. Edited: Actually, the reason video is why not playing is due to cors policy. please try to preview in stackblits preview inside

You weren't doing proper cleanup. That's a React thing. It calls the useEffect() multiple times in strict mode, and you weren't reverting the tweens/ScrollTriggers properly. So you had duplicates conflicting. That's why it's a good idea to use the useGSAP() hook instead of useEffect() - it handles that for you. You also had a different structure to your markup than in your plain HTML version. I'm not sure exactly what you're trying to do, but maybe this will get you going in the right direction: https://stackblitz.com/edit/react-ztc5vg?file=src%2FApp.js

Hi, I uploaded my code to stackblitz. I have a problem that the animation doesn't look correct. My container should be pinned with a pin and sections should scroll left when scrolling and the bar and svg should fill in red. Normally when I implemented it in a plain html,cs and js file. The animation works fine, but it doesn't work in React. The files are in zip. https://stackblitz.com/edit/react-utcnhd?file=src%2FApp.js,src%2Fstyle.css scroll-bar.zip

It looks like your math calculations were off - you were calculating the offset from the current position but you were tweening to absolute numbers rather than relative ones. Is this what you meant to do?: https://codepen.io/GreenSock/pen/XWQQWJK But the problem with that is it's not really responsive. You're animating to specific x/y values but the original top/left absolute positioning is different, so resizing your window will result in different offsets. I think it'd be much cleaner to use a Flip animation instead: https://codepen.io/GreenSock/pen/rNbbNVe?editors=0010 Does that help?

As a question already posed. We do have all the SVG of all the animation,. we're not to sure what kind of for of animation should take place ; i dont want to inhibit any creative ideas . I'll be more than happy to discuss the project and what its trying to achieve - perhaps that will inspire you to come up with a flow of gestures and prompts. !

I have a problem with my gsap script in reat. It works normally in JS when I implement a div called container in React and it moves and disappears, which causes the animation to not work properly, please help. Code below. I am also sending a working animation in a zip. Work.js work.scss scroll-bar.zip

I am struggling to play video by scrolling the page. I have two main issues: 1. How can I properly cleanup animation?! (I need to scroll to top back when i refresh the page) 2. How can I start playing video when it reaches to the top of window while keeping current position until video finishes. Once it's done, I continue to scroll to bottom. Here is my minimal video. https://stackblitz.com/edit/nuxt-starter-sv6wqk?file=app.vue thanks for the help in advance)

I have the same issue, just upgrade my dependencies of react and react-dom to the latest version (). Now it works on my end.

hey i have done with tailwindcss and i try to run your code on my machine and he dosent work. what im doing wrong ?

Okay I have updated it with the codepen.

Thank you guys! I have a rather long page with 3-4 sections in between which are dynamic and slow. Simply using the .sort() method didn't work But using the verticalSort() helper function you suggested did the trick. I just had to include ScrollTrigger.refresh() after the sorting to make it work properly: function verticalSort() { let scroll = window.scrollY; ScrollTrigger.getAll().forEach(t => t._sortY = t.trigger ? scroll + t.trigger.getBoundingClientRect().top : t.start + window.innerHeight); ScrollTrigger.sort((a, b) => a._sortY - b._sortY); ScrollTrigger.refresh(); }

Any ideas suggestions backed with timeframe and cost would be superb . ! thanks a bunch guys

Hello gsap enthusiast, I am looking for someone that could help me with my clients website . https://driveli.co.uk/ ... its not yet live . Id like to get some animation on there. In brief the website is a platform to help learner drivers in the uk , book lessons with their instructors and manage their progress. There is a particular chracter we have created that appears throughout the website ( see screen shot on attachments ) ... id like this charcter to provide comical gestures and ideally intereactive if possible. Youll also see that throughout the site other items of design would also need some attention and i think animation would be perfect for them.

Hi. I would appreciate it if you could take the time to understand my question fully. The timeout is intentional as it demonstrates that when a ScrollTriggers is instantiated due to the state change of a parent component the newly instantiated ScrollTriggers fire on leave events without any user interaction. In order to see this go to the stack blitz demo, open the console, scroll and the see the onleave events fire without any interaction. it doesn’t grow exponentially. The ScrollTriggers are unmounted and rectreated but it always only 5. I would like to know why the onleave events fire without any user interaction.

Got a demo illustrating that? I wonder if you're not setting refreshPriority properly. Perhaps you've got it inverted or you've got overlapping values. 🤷‍♂️ 🥳

That's so much better – I completely forgot about ScrollTrigger! You've been insanely helpful!

Wow, this works out of the box for me🫠. For some reason refreshPriority is not working for me even while increasing the values dynamically. Thanks Jack & Rodrigo

The useGSAP hook has a dependency for at least React 16, but it doesn't use/install React 16: "dependencies": { "gsap": "^3.12.5", "react": ">=16" }, If you already have React 18 installing the @gsap/react package won't change a thing and won't install another version of React. I just tested this on a demo here on my local machine using the latest version of Next without any issues. We only encountered some issues while importing the @gsap/react package from esm.sh, which solves by doing this: import React from "https://esm.sh/react@18.3.1"; import ReactDOM from "https://esm.sh/react-dom@18.3.1"; import gsap from "https://esm.sh/gsap"; import { useGSAP } from "https://esm.sh/@gsap/react?deps=react@18.3.1"; We'll update the dependencies on the hook to be at least version 17 of React. Finally it would be super helpful if you could create a minimal demo that reproduces this error. Happy Tweening!

Thankyou so much for your time

Mhh... Why are you using intersection observer for something that can be done with ScrollTrigger? I think you are overcomplicating this quite a bit. If I was you I'd create an extra prop for ScrollTrigger and if that prop has a ScrollTrigger configuration, you just need to check if is not falsy, instead of using just SplitText use ScrollTrigger to handle when the animation plays, something like this: https://codepen.io/GreenSock/pen/abxMRgp I updated the demo I posted before so it uses ScrollTrigger https://stackblitz.com/edit/nuxt-starter-vzsxyp?file=app.vue The only detail is that this check is not needed with ScrollTrigger: completed && tween.progress(1); Hopefully this helps. Happy Tweening!

Hi @Anas Ali Khan, Lenis is free but is a product of Studio Freight: https://lenis.darkroom.engineering/ Just be aware that we can't offer support for Lenis here, since we need to keep our focus on GSAP related questions. Finally we do have a smooth scrolling solution called ScrollSmoother, that is fully integrated with ScrollTrigger: https://gsap.com/docs/v3/Plugins/ScrollSmoother/ Happy Tweening!