GSAP | GreenSock's GSAP JavaScript animation library (including Draggable) | Animation library

I am trying to recreate this codepen with react and gsap on here and i have been trying to recreate this for about an hour now and do not even know where to start from, please who can help. i do not want to create the sections the same way in that codepen but rather form the details from an array of objects meaning creating just once component, i am fairly new to react and i would like know how to do something like that in react, looking at it from vanillajs perspective, i already know what is going on and i also created it like this in react but i want a situation where i have minimal code and the an array of objects forms one component making it more dynamic so i can click on it to get more information about each section that comes in. kindly assist Codepen link below https://codepen.io/designsbyharp/pen/jObpWZg

HTML

I have an element called .listing__nav which I want to pin upon scroll.

When the .listing__nav touches the top of the window, I want it to become fixed and to unpin only when the banner element comes into view.

To achieve this, I've tried the following:

I have an svg which forms the basis of my horizontal scroller.

Within this svg, I have added the class .animate to the elements which I want to fade in up as the item comes into view. The .animate class for reference has been added to all the text items in the svg.

Currently, only the .animate elements that are in view initially fade in up. When I scroll down to continue the scroller, the other elements are static. They're not fading in or translating up or down in any way?

TL;DR, here is what I'm trying to achieve:

• When the scroller pins in place, and the user continued to scroll down, start fading away .horizontalScroller__intro.
• Once .horizontalScroller__intro has faded away, start the horizontal scroll for .horizontalScroller__items
• Any elements with the class of .animate in my scroller will fade in up to its original position.

Note: I understand SO rules and preferences to post code here. But, my demo's contain a length SVG, which I cannot post here as it exceeds SO's character limit.

Here is a demo of my latest approach

From the scrollTrigger docs, containerAnimation is what helps achieve animations on horizontal scrollers, and is what I've tried to achieve.

However, in my demo above, I have the following issues:

1. .horizontalScroller__intro doesn't show initially, when it should, and should fade out on scroll.
2. The horizontal scroller doesn't work anymore
3. The .animate elements that are in view, do not fade in up

If I use timeline (see below snippet), then the intro fade out and scroller works. But, doesn't animate in the child elements, which is where I need containerAnimation

I manage a WordPress website which uses a Three.js animation on the homepage. I built this site months ago and everything had been working perfectly fine - I even showed it to someone a week ago and nothing was amiss. Yesterday, I check the site and find that Three is not loading, and that I have this in the console:

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

I don't have a line or even file to reference, the error is logged coming from the first line of the root domain. I want to emphasize that I had changed absolutely nothing about the set-up. I hadn't even updated to WP 5.9 yet. This is how I had originally set things up. Sorry if it's not best practices, but I want to emphasize that it did in fact work fine. Enqueuing animation javascript file and defining its type as "module":

I have a problem that keeps popping up with GSAP and ScrollTrigger.

I have multiple pinned sections where, as the user scrolls into a section, images slide in from the side.

When I make these images slide in from the same side everything is fine, but as soon as I make a section slide in from the right the sections start to overlap as though it is executing before the previous pin has finished.

Strangely, if the top section slides in from the right then the next section is fine, but any further down the page cause issues.

I have a Codepen here: https://codepen.io/rob-wahlberg-beaney/pen/BamNxaN?editors=1010

Here's the code to slide things left:

I am working on a doughnut circle svg with expanding tabs. As of last night the expanding tabs are fully functional and the correct x/y transform is applied on mouseenter/mouseleave. (the x/y is essential on both mouse enter and mouse leave for proper transform origin - this was difficult to get each tab expansion to appear centered as it is a circle).

Today I have tried going further with the project by creating an additional loop that displays corresponding content based on the active tab index. (This is working).

Now I want to go a step further by making the current tab stay expanded until another tab is hovered over. Right now the eventlistener mouseleave applies when my mouse leaves the tab (obviously). What can I do to keep the current tab "active" unless hovering over another tab? (rather than the mouseleave?). I am still fairly inexperienced with JS, I'll be content if anyone could just send me in the right direction

CodePen

I am attempting to animate an svg doughnut circle with gsap. After much testing with code and layering, I am stumped with a glitchy hover effect (which I tried to resolve with pointer events) and the transform origin is only applied to a few of the expanded tabs. I am wondering if this might be that the tabs may have a different bounding box?

Comments added per request:

Side Note: I've tried applying fill-box to entire svg instead, I'm wondering if I need a parent layer thats an exact square so I can apply the transform origin for the child "expandtabs" to the center of that?

I assumed I needed to iterate through an array of both to have the tabs correspond. Unless the tabs were children of each other?

TLDR; Tabs are not scaling from center of circle, and glitchy hover effect

CodePen Example

On a website I'm creating there is a cursor that needs to change its color smoothly.
When it is on a white background the cursor needs to be the blue #0059ff (this is important and I will explain why later on) and when it is on blue then the cursor needs to be white; and the transition needs to be smooth like so:

To get the white color with mix-blend-mode I'm calculating the inverted color using adjust-hue($color, 180) (in SCSS) and applying this color to the cursor.

When the background color is #0000ff then cursor should be #ffff00.

I have started a prototype using mix-blend-mode: difference that works on "primary colors" (basically colors like #ff0000, #ff00ff and so on).
Result:

Problems begin when I try to change the "primary" blue #0000ff to the one needed by the project #0059ff. The inverted color is calculated to be #ffa600 and the result is, let's say, "unsatisfactory" because I want the cursor to be white on some background color and said color on white background.

Calculating the difference will not work with this color and I have no idea how to make it so that when the cursor is not over the white background then the cursor becomes blue (-ish) and when it's over the blue background it becomes white.

My whole code so far:
(SCSS compiled so it can run in StackSnippet)

I have a block which becomes pinned and scrolls horizontally.

Within this block, I have a vector which has a width of 3573px.

When a user scrolls horizontally, I want the vector to scroll also, alongside the images in my demo.

Have tried moving my vector under .horizontalScroller__scroll, so that it scrolls alongside the images, but that didn't work.

See demo: