ZachSaucier

For reference this was asked about (and hints given) in the GSAP forum:

Hey Unbekannter and welcome to the GreenSock forums. First off, you're making one of the most common GSAP mistakes and one of the most common ScrollTrigger mistakes: using the old GSAP syntax and including ScrollTriggers in tweens within timelines. I recommend upgrading to the GSAP 3 syntax. I also recommend creating a timeline that does everything that you need and then attaching one ScrollTrigger to that timeline. That should make achieving your goal pretty straightforward.

If you're going to do that sort of thing I'd do it like this, where you have to clone the first slide and be more careful about handling the looping: https://codepen.io/GreenSock/pen/QWGXdyd?editors=0010 Also note that I used autoAlpha and the .slide element as the element reference (as opposed to the img) so things are clickable.

Hey mot and welcome to the GreenSock forums. You're making one of the most common ScrollTrigger mistakes: including ScrollTriggers on tweens within a timeline. Doing so doesn't make much sense. Try making it without a timeline and let us know if you get stuck again

What NPM version are you on? In the latest you currently have to add a version number minimum (an NPM issue, not a GreenSock issue). npm install gsap@npm:@gsap/shockingly@^3.6.0

That's still not very minimal... We don't need to see all of your models or lighting or animated deer. Demos should be focused on the issues being asked about. But what's wrong with your demos? It's animating the camera position as you're telling it to...

There are syntax errors preventing that demo from running. Regardless, please make minimal demos when sharing to this forum if you'd like coding help, i.e. remove everything not directly related to the question. Additionally please use the "fork" button when editing demos that have been shared to these forums so that context is not lost for future readers. Thanks.

If you need to update where the camera is looking at, you could use GSAP's ticker or an onUpdate callback of a relevant tween/timeline. It'd probably be better to use an onUpdate unless you have a lot of different tweens/timelines that affect where the camera needs to look.

Listed in the ScrollTrigger demos section is this demo which creates a 3D path and then scrolls through it. That's the only one I'm aware of right now, but the concept is fairly simple, there are different ways to approach it.

Flip should be compatible with things being added and removed from the DOM if it's set up properly. It might require using specific hooks/callbacks appropriately. If you set up a minimal demo of the situation perhaps we can provide some input.

Hey lucrampro. The InertiaPlugin is one of the many premium Club GreenSock plugins. So unless you have access to a Club GreenSock membership then it won't be available to you. Usually people find that a membership pays for itself in a matter of days! Once you have access to a Club GreenSock membership you can install the Club plugins via a .tgz file in the ZIP download or via the GreenSock private registry. Both methods are covered in the GSAP installation docs.

Positions in Three.js are an object. GSAP animates objects. So you just need something along the lines of the following: gsap.to(myObj.position, { x: 3, y: 1, z: 0 });

It looks like iDad5 updated the original demo so that the issue is no longer visible? Please use the "fork" button when updating demos that you've posted to these forums so that context is not lost for future readers. I'm not sure what "elaborate explanation" you're looking for as the one by Paul seems spot on. It seems to be a logical issue related to the way that left/top are handled. If I were doing this sort of thing I'd likely use scaleX and transformOrigin instead. That way you don't have to change any non-performant properties (left, right). It seems that you default to using these properties when there are better alternatives available, iDad5.

Scrolling is only one dimensional. So if you want to translate that into 3D space you'd need to give it at least a 2D path along with proper camera aiming or you could give it a 3D path if necessary.

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.

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.

At the core, the issue is that the old animation still exists. You could remedy that in several ways. One is to animate the actual CSS variable(s) with GSAP. Another is to recreate the animations that were created earlier. Or you could avoid the whole issue by using fade outs instead of animating the color values themselves. Like this: https://codepen.io/GreenSock/pen/ExNzpVd?editors=1010 In any case you should avoid using <br>s for making elements appear separate. It's much better practice to use a <ul> and remove the bullet points than to use <br>s for layout.

Hey marxcie. I still think you're focusing too much on the code. Could you please try to answer my questions from my last post?

Hey Greg (Nekiy ). You don't really need the Draggable's snapping functionality if you're wanting to swap places, though you could build it with it if you want to. One of the key things your demo is missing is that you're positioning the content with CSS alone (flexbox) whereas the original demo is using absolute positioning and placing things with transforms. Both could work and have tradeoffs. If you do it your way, every time you need to measure the positions there's a slight performance hit. If you do it with transforms, it's slightly harder to make responsive. There are a lot of ways to do this sort of thing depending on your exact needs. In general terms, you need to keep track of where an element was, where it should end up, animate both the element and the other(s) based on where the element gets dropped, and optionally change the other elements based on where the element being dragged currently is. Before I race ahead building something for you, what's your end goal? If an element is dropped, should the two items switch? Or should all of the elements "shift" to make room? Should the elements move as the element is being dragged or only at the end? How should this be responsive? Keeping the gaps between the same? Scaling everything inside of it? Scaling the background rect but not the content? Keeping the size the exact same but wrapping the squares as necessary? What browsers do you need to support?

Note that you can't auto-play media with audio unless the user has interacted with the page (click or something active like it).

I can't answer your sever-side specific questions as I don't have a perfect grasp of how those processes work. Perhaps @OSUblake can provide some input. I believe it's one or the other.

Hey marxcie. You've got a lot of code there, much more than I'd expect for this sort of thing. How about you try explaining the end goal and then we can help you get there? What's the goal? From what I can tell, you want to stagger in reveal some columns of text, then change the color of most of them so that some are highlighted. Is that correct? Am I missing something?

There's a lot of ways to do that sort of thing. You could use data attributes and then refer to those in the loop. Or you could use classes to do something similar. Or keep a map of elements to vars in a JS object. Or some other ways. Most likely whatever comes intuitively to you is fine

Hey kreativzirkel. This is covered in this thread: Your options are to either transpile GSAP or to use process.client to make sure it's only ran on the client side.

So like a version number at the top of each TS declaration file? @GreenSock is that something that we could automate? I guess a directory-wide find and replace would work.