GSAP Helper

Sorry to hear about the trouble! That sounds stressful. 
 
Yes, that's correct - an active Club GSAP membership is required for access to the private repository. https://gsap.com/pricing 
 
If you downloaded the zip while you were a member, there's a gsap-bonus.tgz file that you can drop into your project directory and npm install ./gsap-bonus.tgz to have it install just like a normal NPM package (but it's using that local file). 

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 
 
Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.
 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen
that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo:   
Using a framework/library like React, Vue, Next, etc.? 
CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 
React (please read this article!) Next Svelte Sveltekit Vue Nuxt  
Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 
 
Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

Hi there! I see you're using React -

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.
 
Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.
 
Here is how it works:
const container = useRef(); // the root level element of your component (for scoping selector text which is optional) useGSAP(() => { // gsap code here... }, { dependencies: [endX], scope: container }); // config object offers maximum flexibility Or if you prefer, you can use the same method signature as useEffect():
useGSAP(() => { // gsap code here... }, [endX]); // simple dependency Array setup like useEffect() This pattern follows React's best practices.
 
We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/
 
If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

Also, for the path conversion, I think the issue is that you're using percentage values which aren't compatible. Use normal SVG units and it should be fine. Maybe like: 
<ellipse cx={window.innerWidth / 2} cy={window.innerHeight / 2} Or you can set a viewBox and have the SVG scale/stretch accordingly so you can hard-code numeric values in there while keeping it somewhat responsive. 

Hi there! I see you're using React -

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.
 
Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.
 
Here is how it works:
const container = useRef(); // the root level element of your component (for scoping selector text which is optional) useGSAP(() => { // gsap code here... }, { dependencies: [endX], scope: container }); // config object offers maximum flexibility Or if you prefer, you can use the same method signature as useEffect():
useGSAP(() => { // gsap code here... }, [endX]); // simple dependency Array setup like useEffect() This pattern follows React's best practices.
 
We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/
 
If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  
 
If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 
 
You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 
 
Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 
 
Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.
 
That said check out this tutorial by our own @Carl, it is a scroll driven effect, but you can probably gleam some knowledge form its setup to use in your own project. 
 
 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen
that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo:   
Using a framework/library like React, Vue, Next, etc.? 
CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 
React (please read this article!) Next Svelte Sveltekit Vue Nuxt  
Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 
 
Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

Hi @James Golden and welcome to the GSAP Forums!
 
I see you're using React.

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.
 
Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.
 
Here is how it works:
const container = useRef(); // the root level element of your component (for scoping selector text which is optional) useGSAP(() => { // gsap code here... }, { dependencies: [endX], scope: container }); // config object offers maximum flexibility Or if you prefer, you can use the same method signature as useEffect():
useGSAP(() => { // gsap code here... }, [endX]); // simple dependency Array setup like useEffect() This pattern follows React's best practices.
 
We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/
 
If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

Hi there! I see you're using React -

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.
 
Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.
 
Here is how it works:
const container = useRef(); // the root level element of your component (for scoping selector text which is optional) useGSAP(() => { // gsap code here... }, { dependencies: [endX], scope: container }); // config object offers maximum flexibility Or if you prefer, you can use the same method signature as useEffect():
useGSAP(() => { // gsap code here... }, [endX]); // simple dependency Array setup like useEffect() This pattern follows React's best practices.
 
We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/
 
If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

Hi @imksmv and welcome to the GreenSock forums!
 
We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  
 
If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 
 
You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 
 
Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 
 
Finally maybe this video @Carl made about an example created by @PointC could help, if I'm understanding what you're trying to achieve correctly.
 
Happy Tweening!

Without a minimal demo, it's a bit challenging to offer advice here. If you can provide a Stackblitz or something, that'll go a long way to getting you a solid answer. Just something super simple to illustrate the challenge (not your actual project).
 
In general, though, I can say that GSAP can literally animate anything that JavaScript can touch. So if you've got a special way you need to update a value due to your React plumbing, you could just use an onUpdate, sorta like: 
 
const [value, setValue] = useState(0); const { contextSafe } = useGSAP(); const onClick = contextSafe(() => { const proxy = {value: value}; gsap.to(proxy, { value: value + 10, ease: "none", duration: 1, onUpdate: () => setValue(proxy.value) // <-- update the real thing using React plumbing }); }); Here are some starter templates you can fork:
React (please read this article!) Next Svelte Sveltekit Vue Nuxt  
Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 
 
Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

Yeah, that's definitely a browser graphics rendering issue, unrelated to GSAP. Here's a quick recording from Dev Tools that makes it clear - notice the huge "paint" time: 
 


A lot of performance problems are down to how browsers and graphics rendering work. It's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: 
Try setting will-change: transform on the CSS of your moving elements.  Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left.  Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance.  Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow) Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story.  data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any).  Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" 
I hope this helps!

Hi there! I see you're using React -

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.
 
Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.
 
Here is how it works:
const container = useRef(); // the root level element of your component (for scoping selector text which is optional) useGSAP(() => { // gsap code here... }, { dependencies: [endX], scope: container }); // config object offers maximum flexibility Or if you prefer, you can use the same method signature as useEffect():
useGSAP(() => { // gsap code here... }, [endX]); // simple dependency Array setup like useEffect() This pattern follows React's best practices.
 
We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/
 
As for your specific question, it's very difficult to troubleshoot by just looking at some excerpts of code. I'm not sure what exactly you mean by "ScrollTriggers are not synchronized with ScrollSmoother". Can you please provide a minimal demo, like on Stackblitz, that illustrates the problem? Here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. You can use the gsap-trial package to reference ScrollSmoother. 

Hi @anzorAs and welcome to the GSAP Forums!
 
I see you're using React!

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.
 
Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.
 
Here is how it works:
const container = useRef(); // the root level element of your component (for scoping selector text which is optional) useGSAP(() => { // gsap code here... }, { dependencies: [endX], scope: container }); // config object offers maximum flexibility Or if you prefer, you can use the same method signature as useEffect():
useGSAP(() => { // gsap code here... }, [endX]); // simple dependency Array setup like useEffect() This pattern follows React's best practices.
 
We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/
 
If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

Hi there Armand,
 
Would you please provide a simple CodePen or Stackblitz that illustrates the issue? 
 
Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.
 
Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 
See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen
 
Using a framework/library like React, Vue, Next, etc.? 
CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 
React (please read this article!) Next Svelte Sveltekit Vue Nuxt  
Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 
 
Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Welcome to the GSAP community, @Siam Khan.
 
Vague details like 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer:
A clear description of the expected result - "I am expecting the purple div to spin 360degrees" A clear description of the issue -  "the purple div only spins 90deg" A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container"  A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great. Please keep in mind that we can't provide free general consulting services, like "I want it to do ___ and ___ and ____ and then ___, please show me how to build it". I'd encourage you to take baby steps and focus on one problem at a time. As a specific question and provide a minimal demo. Then, once that's done, move on and ask your next question if you get stuck. 
 
Good luck!

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting and custom logic stuff. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  
 
Are you trying to make a seamless horizontal loop? If so, I'd recommend using the helper function here: https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/
 
(The logic in the one you built there looks off to me.)
 
You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

Hi @ppistecky and welcome to the GSAP forums!

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.
In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.
Here's the structure:
// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start. useLayoutEffect(() => { let ctx = gsap.context(() => { // all your GSAP animation code here }); return () => ctx.revert(); // <- cleanup! }, []); This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background.
We strongly recommend reading the React information we've put together at https://gsap.com/resources/React/
 
Finally now we have the useGSAP hook that simplifies this quite a bit:
https://www.npmjs.com/package/@gsap/react
 
Happy tweening!

Yeah, the way you set that up is EXTREMELY hard on the graphics rendering engine in browsers. Filters are just terrible. Totally unrelated to GSAP, of course. And then you also have to be careful about the overall bounding box of pixel changes between ticks. You've got a huge bounding box (way beyond the edges of the browser). 
 
A few ideas: 
Instead of ellipses with blurs applied, do the blur in Photoshop and save it as a PNG with transparency and animate that so that you're not asking the browser to dynamically do that blurring on every tick. Basically, pre-render that blur. Or try using something like Pixi.js which leverages WebGL for much better rendering performance. Don't use SVG.  Or use a video Here are some other general performance tips: 
Try setting will-change: transform on the CSS of your moving elements.  Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left.  Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance.  Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow) Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story.  data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any).  Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" 
I hope this helps!

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 
 
Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.
 
Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 
See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen
 
Using a framework/library like React, Vue, Next, etc.? 
CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 
React (please read this article!) Next Svelte Sveltekit Vue Nuxt  
Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 
 
Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

A lot of performance problems come down to how browsers and graphics rendering work. Performance is a DEEP topic, and we can't do a full performance audit for free on a live site, but here are some tips: 
Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance.  Right now, you're animating the xPercent of a bunch of individual elements, but perhaps it'd be better if you just animated their container element instead. Maybe experiment with setting visibility: hidden on elements that are outside the viewport so that the browser doesn't need to render them.  Try setting will-change: transform on the CSS of your moving elements. Maybe try setting force3D: true on them as well through GSAP.  Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left.  Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow) Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story.  data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any).  Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" 
I hope this helps!

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 
 
Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.
 
Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 
 
Using a framework/library like React, Vue, Next, etc.? 
CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 
React (please read this article!) Next Svelte Sveltekit Vue Nuxt  
Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 
 
Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Hi there, @Davedo. Are you saying that you changed something on your site and now things aren't working properly? Or are you saying you updated the GSAP version or something like that? Sorry, I read your post a few times and I'm not quite sure what you're asking from us. 
 
It's a lovely-looking site by the way. 👏
 
If your start/end values seem off, my best guess is that you've got things loading into your site AFTER the page loads that are affecting the layout, shifting things around. For example, if you have lazy-loaded images and they load in and suddenly take in more space, pushing other things down in the layout. Either set all the widths/heights explicitly in your CSS/markup so that those don't shift -OR- make sure you call ScrollTrigger.refresh() AFTER everything is completely done shifting the layout around -OR- don't do lazy-loading. 
 
Maybe you've got other 3rd party libraries that are messing with the layout too. I noticed you're loading a lot of different libraries for various effects, and I wonder if those are throwing things off measurement-wise.
 
Here are some tips that will increase your chance of getting a solid answer:
 
A clear description of the expected result - "I am expecting the purple div to spin 360degrees" A clear description of the issue -  "the purple div only spins 90deg" A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container"  A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.  
We can't troubleshoot live sites like the link you provided - there are far too many factors there and we can't tweak the code and see the results. Please make sure you provide a minimal demo like a CodePen or Stackblitz that clearly illustrates the issue if you'd like some help.
 
Also, it looked a little odd to me that you set your toggleActions to "play reverse play reverse"

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  
 
If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 
 
You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 
 
Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Hi there! I see you're using React -

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.
In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.
Here's the structure:
// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start. useLayoutEffect(() => { let ctx = gsap.context(() => { // all your GSAP animation code here }); return () => ctx.revert(); // <- cleanup! }, []); This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background.
We strongly recommend reading the React information we've put together at https://greensock.com/react
Happy tweening!