ZachSaucier

Use algebra to rearrange the formula I posted in the last comment  index = currXPos / slideWidth -> currXPos = index * slideWidth.

Hey Anatole and welcome to the GreenSock forums! Thanks for being a Club GreenSock member.
 
The easiest way to fix this is to disable pointer events for the children of the element that you have the mouseover event for. You can do that in this case by setting pointer-events: none; on .linkcontainer. Alternatively, you could apply it to .link > * instead.
 
Side note: I recommend looping through each navigation item to apply the animation and mouse enter/exit events, but I assume you know how to do that  

If I were creating something like that, I'd approach it very differently than how you're approaching it. I'd only have one Draggable element that is placed on top of your other content starts being "dragged". Then, while dragging, if its hit test is above your threshold, you switch out the text of the relevant elements. When the mouse is released and it should swap, animate it to the position on the screen of the target box (you could use the Flip plugin but could also do it by hand) and do whatever else you need it to do.

Hey AwSick and welcome to the GreenSock forums.
 
Which delay are you trying to reduce? I'm guessing the big change in scale at the end of your timeline? 
 
You're using a set numerical value as the position parameter, which put the tween at the given second in time of the timeline. It's useful in some circumstances but usually other methods of positioning using the position parameter are more help, especially ones that let you position tweens relative to other tweens in the timeline. I strongly recommend going through the position parameter post. I also suggest going through the most common GSAP mistakes as you're making a couple of them.

Someone else may be able to better explain why setting the duration of the timeline doesn't work well, but usually for things like this I add a dummy tween: https://codesandbox.io/s/gsap-scrolll-forked-37lbi?file=/src/App.js
 
Side note: you don't needs quotes around the scale value.

Hey Araf. Posting more does not make your question more likely to be answered. In fact, it does the opposite because it is a little annoying  We'll be sure to answer every question that we're able to answer (within reason). Please don't comment again if there's nothing new to add.
 
As I said, you just need to change the start position of the tween that animates the background image's position. Here's a basic example:

See the Pen rNxmZWp?editors=0010 by GreenSock (@GreenSock) on CodePen

Hey Farrukh and welcome to the GreenSock forums.
 
To do this we recommend using an actual smooth scrolling library. Then you need to hook up your smooth scrolling functionality with ScrollTrigger via .scrollerProxy(). There are several demos in the docs for it that show you how. 

You could click the "Mark as solution" button that's in the bottom of each post, but you don't have to do that. 

Hey girro. Some notes:
You're making one of the most common GSAP mistakes of using the old duration parameter instead of including the duration inside of the vars. Putting it in the vars also lets you use defaults. Your repeatRefresh isn't doing anything. If you're going ahead with some ES6 stuff (like arrow functions) you may as well use more features (like using const and let). If you're using a timeline we recommend using the position parameter instead of the delay property. We recommend using the latest GSAP version (3.6.0 at the moment). On CodePen, you should only include the stuff within the body in the HTML section. And you can load external resources via the cog icon next to JS (and CSS). I recommend adding a background rect to each button so that they're easier to click. As for your question, often times it's good to create animations ahead of time and use control methods (this is one of the tips to animate efficiently). However, if you need the animations to overwrite each other  like this usually it's best to create the animation when you need it. I'd approach it like so:

See the Pen GRNLwXE?editors=0010 by GreenSock (@GreenSock) on CodePen
 
With that being said, your timelines currently affect both state-specific elements and shared elements (like the background shape). The way I have it set up above, the animation is killed off completely when an item is clicked, which could be an issue if users click between them fast enough. To remedy that, I'd separate the state specific animations from the shared animations. Only kill off the animation(s) related to the shared elements and let the ones for each state continue.

Hey leenalfalah. You can animate the camera's position just like any other object. For example:

See the Pen oNYmKQa?editors=0010 by GreenSock (@GreenSock) on CodePen
 
If you want to do something on scroll, you probably want to attach a ScrollTrigger. Probably something like this:

See the Pen GRNzVPV?editors=0010 by GreenSock (@GreenSock) on CodePen

Ah, that's what you mean.
 
That's because I forgot to add the trigger: trigger: ".anim_me". The start/end values are fine.

We don't really have the capacity to do code optimization for every person who posts in these forums.
 
Glancing at the code I'd try to avoid creating functions inside of a loop if possible. I bet you could avoid having to get the BoundingClientRect every mouse move event. You should also make sure to overwrite the previous animations in GSAP 3.
 
There's really not that many calculations going on - GSAP can't remove the need to avoid calculations in every case. 

Hey ALTIMAX. To get the values to update on resize you should use functional values and invalidateOnRefresh: true in the ScrollTrigger vars:
gsap.to(".Video-pic", { width: () => '100vw', height: () => '100vh', scrollTrigger: { markers: true, pin: ".Video-container", start: "top top", scrub: true, invalidateOnRefresh: true } }); It's actually one of the most common ScrollTrigger mistakes.

A good way to do this sort of thing is to put elements in a container and affect the container with one animation and the content with another.

That's probably how long the page takes to load before the JS runs at all.

Hey truAscention. If you'd like our help debugging, please create a minimal demo of the issue with all irrelevant parts stripped out. Often times it's best to start from the ground up.

Closer to a minimal demo  
 
Several notes:
You're still using the super old version of GSAP. Again, we recommend upgrading. If you upgrade, you should also apply overwrite: 'auto' to your tween that animates the position of your circle. See this post for more info. If you remove the Locomotive Scroll part you can see that your code doesn't work in that case either. I don't really understand why you're using the setTimeouts. You should avoid container.getBoundingClientRect() from firing every tick if you can as it's not very performant. As I said in my first post in this thread, since Locomotive Scroll replaces the natural scroll you'll need to get the position of the scroll from Locomotive instead of from the default scroller of a page. In cases like this you need to see how the element is mispositioned (is it always a constant amount off? If so where is that constant amount coming from? Is it off by how much you scroll? If so you need to add in the scroll position to the calculation). 
 
If I were creating this I'd probably make the circle a child element of the section that you care about and position it absolutely. That makes the calculations easier, though it's definitely possible to do the way you have it. 
 
I've not used Locomotive Scroll too much. The only way that I'm aware of getting the scroll position is using the scroll event listener. There might be a better way (like a property on the locomotive instance) that you could do instead.

See the Pen bGBjzvX?editors=0010 by GreenSock (@GreenSock) on CodePen

Ah, I see now. Thanks for the code. FYI if you press the <> button in the post editor bar you can add formatted code  
 
The issue is that in the first case you are adding timelines to the array. So when you call .kill() it kills the timeline but not the ScrollTrigger. The second code adds the ScrollTriggers so when you kill them it kills the ScrollTriggers.
 
In the first case if you want to kill both the timelines and the ScrollTriggers it's easy:
triggers.forEach(t => { t.scrollTrigger.kill(); t.kill(); });  

That's the way to go  

You should be overwriting the appropriate tweens.

See the Pen OJbwMZE?editors=0010 by GreenSock (@GreenSock) on CodePen

Hey pencilCrash and welcome to the GreenSock forums.
 
We have a whole post about this flash of unstyled content (FOUC)!

Hey Théophile. 
 
The philosophy that you're talking about is a more general one than restricted to ScrollTrigger. It is: do as much relevant work as you can ahead of time, especially when someone is going to be waiting on you  
 
If I were tasked with creating this effect I'd create a timeline that animates all of the images as you need them to in terms of its position and scale. Then scrub that timeline using a ScrollTrigger. It's very similar to what you have now but would include the scale baked into the timeline animation.
 
I recently helped someone do pretty much the same thing here:
 
 

It does, but you're creating a new animation each time... So the progress of the new animation is being set each time. See the issue?
 
If you include the timeline and tween creation in a useEffect with [] as the second parameter it works as I think you're wanting it to work:

See the Pen jOVxqVV?editors=0010 by GreenSock (@GreenSock) on CodePen

You use the gsap.ticker.add() method for that  
 
Once you have added a function to GSAP's ticker it runs every time the ticker updates.
 
There is no general error listener for the event, no. However you can wrap whatever code you write in your own try catch blocks. 
 
Perhaps it'd be helpful to share with us what you're trying to accomplish.
 
Edit: I'm betting you're the same person that asked this on StackOverflow. I think the issue boils down to a misunderstanding of how this and/or arrow functions work  

Hey Juc1.
 
The main issue here is that CSS filters can not be applied to SVG elements in Chrome. So if you apply an SVG filter and animate that instead, it works:

See the Pen ExNEYRM?editors=1010 by GreenSock (@GreenSock) on CodePen