OSUblake

Try this. 😉
 
ScrollTrigger.refresh();  
See how I'm calling that after changing the height of the content. Same concept for injecting stuff into the DOM.
 

See the Pen jOYzWRr by GreenSock (@GreenSock) on CodePen
 

You can use matchMedia to setup your ScrollTriggers for different devices.
 
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
 

Yeah, but you need to get a reference to the element first. And you don't include the . for the class name.
 
tl.add(() => document.querySelector("#btn1 > div > a").classList.toggle("lqd-cc__active-links"))  

Hi Paul, 
 
You really can't prevent that using an image as there will be pointer events on every part of the element. Your best bet is probably to use an SVG. Just a quick demo of a box showing the you can't drag in the empty spaces.
 

See the Pen WNddKKB by GreenSock (@GreenSock) on CodePen
 

Due to pinning, the scroll position of that element changes as the page scrolls. You'd need to calculate where exactly the element is, kind of like how this demo does.
 

See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen
 

Hey jbanj,
 
I'm not familiar with animating that property, but assuming it will automatically update after you change it, you would just animate the property.
 
gsap.to(renderer, { toneMappingExposure: 0.2, scrollTrigger: { ... } })  

Welcome to the forums @HunterD
 
The CodePen works fine, although I would strongly recommend updating to latest version of GSAP. That's a really old version there.
 
 
And you should not be copying code from that view uncompiled section as CodePen is injecting stuff that will not work outside of CodePen. 
 
if (window.CP.shouldStopExecution(0)) break;  
Just use's what is actually shown the editor.
 

I wouldn't call it a hack. It's what need to make it work. You can't have two simultaneous animation running on the same element that target the same properties. It's creating a conflict. It's very similar to this question, where they were creating conflicting opacity animations.
 
 

Hi Kutalev,
 
I wouldn't say there's a cleaner way. Appending an new element to the DOM is how most modals are done to make sure it is placed on top of everything. So I'm using from and to methods here. Just click anywhere.
 

See the Pen rNpGXZq by GreenSock (@GreenSock) on CodePen
 

Hi cptain,
 
Another option would be to just create a new animation in every hover state.
 

See the Pen PoEJeNP by GreenSock (@GreenSock) on CodePen
 

I'm not sure pinning the body is a good idea. I guess you could just pin a background element, kind of like this.
 

See the Pen NWXvJzN by GreenSock (@GreenSock) on CodePen
 

I'm not sure how that could play a role as Vite is just a build tool. It's not like it's actually running the animations or anything, but glad to hear that the issue is resolved. 😁

Hi James,
 
You can't animate a nested array like. There is the EndArrayPlugin that's built into GSAP, but you would need to create your animations in a loop.
 
let arrayOfArrays = [[1],[2],[3]]; let endArrayOfArrays = [[4],[5],[6]]; arrayOfArrays.forEach((arr, i) => { gsap.to(arr, { endArray: endArrayOfArrays[i], onComplete: () => console.log(arrayOfArrays) // [[4],[5],[6]] }); });  
Also, it's pretty easy to animate points without a library.
 
 

Welcome to the forums @Flawe
 
 
I do believe you're the first to ask that question. Not dumb, just strange as ScrollTrigger was designed to go from top to bottom or left to right. If you need it in reverse, you're probably going to have to do everything yourself in callbacks, and I wouldn't count on any pinning behavior to be what you expect. 
 

See the Pen JjMyVjx by GreenSock (@GreenSock) on CodePen
 

Welcome to the forums @mallardandclaret
 
Your ScrollTriggers need to know about the scroller they are using.
 
 
I'd just set it as default so you don't have to worry about adding it to every trigger.
 

See the Pen bGarbXG by GreenSock (@GreenSock) on CodePen
 

Have you used GSAP and Timelines before? If so, you might be overthinking this. Just break it down it steps, like what you want to happen.
 
Animate 1st item closed and 2nd item opened Animate 2nd item closed and 3rd item opened etc  
Just a very basic timeline. Now that I have my timeline, I can hook it up to a ScrollTrigger and it should be all good.
 
Note: I'm note suggesting that you use any of the code or CSS from this demo. I'm just showing the concept of making a timeline.
 

See the Pen MWrbZLm by GreenSock (@GreenSock) on CodePen
 

To get the latest values, you will need to add invalidateOnRefresh: true to your ScrollTriggers and use function-based values. Ex...
 
bottom: () => `-${document.querySelector('.content-0').offsetHeight}`  
The other issues are probably because you are animating your content-0 trigger. Definitely not a good idea as it's going to be in the wrong place when it resizes. Try animating a wrapper element instead.
 

Welcome the forums @Serhat Düzgün
 
That all.js file is for modules, which is probably not what you want. You should just link to all the .min.js files in the minified folder.
 
Ex...
<html> <body> <h1>Some content</h1> <script src="path-to-my-scripts/gsap.min.js"></script> <script src="path-to-my-scripts/ScrollTrigger.min.js"></script> <script src="app.js"></script> </body> </html>  

Can you make a minimal demo showing that it's not working?
 
 
You could make a function to loop through all the targets and do that, kind of like this...
 

See the Pen 0885f7278936d2112ab2bb4b45c9db1e by GreenSock (@GreenSock) on CodePen
 

You're overwriting the style that GSAP is targeting. Just use gsap.set or use a quickSetter.
 

See the Pen LYebqNq by GreenSock (@GreenSock) on CodePen
 

Hi pdub, 
 
I'm not sure what you're looking for, but another way would be to just keep setting the scroll position while it's animating.
 

See the Pen wvpgwOe by GreenSock (@GreenSock) on CodePen
 

Welcome to the forums @pedromeneses97
 
You just need to pin the section that wraps your text and the container, instead of pinning the container.

Welcome to the forums @Imperyum
 
It's in the docs, but I would recommend using CSS variables instead. You can't target an element with that plugin, only rules.
 
 

You wouldn't use ScrollTrigger.kill(). Assuming you want to kill every single trigger...
 
ScrollTrigger.getAll().forEach(t => t.kill())  
And I also don't know what that scrolling object is doing. It looks like it's adding event listeners, so you will have to remove whatever that is doing.
 

And you may need to create your ScrollTriggers again. Also, you were importing the wrong ScrollTrigger. scrollTrigger is not GSAP's ScrollTrigger.
 
// import ScrollTrigger from "scrolltrigger"; import { ScrollTrigger } from "gsap/ScrollTrigger";