ScrollTrigger | Let your page react to scroll changes | Frontend Framework library

i was following along some dude in youtube creating a landing page with animation using GSAP , but at the part when he uses scrollanimations he used gsap.to() method but the trick is when is use

docement.querySelector('string here to class name')

it gives me an error Property 'querySelector' does not exist on type 'Document'

but it works perfectly with the man .. i did my research but can't find no thing useful here is the code

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 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:

I have sections across my site which are using ScrollTrigger. Once I implemented Locomotive JS, all of my ScrollTrigger animations stopped working.

I read through the forums and saw that you need to update() ScrollTrigger when Locomotive is scrolling. I implemented this and saw no results.

Then, I resized the window and my ScrollTrigger animations that were in view, they started working.

In short, animations trigger on resize, but not on page load.

I've implemented update() and also tried refresh(), but no luck.

Demo (fiddle showing issue here also):

I have an ScrollTrigger animation which I only want running once.

As per the docs, "If true, the ScrollTrigger will kill() itself as soon as the end position is reached once."

However, in my case, when I add once: true, I get the message "Invalid property", "once", "set to", true, "Missing plugin? gsap.registerPlugin()" in console, when I've registered the plugin already?

If an element has the class .stagger then I'm trying to execute an animation which shows the cards one by one.

In my current demo, the cards all fade in together. Even though I've specified a delay?

How can I the cards to appear one by one?

I have a problem using GSAP ScrollTrigger inside React fullpage.js . I have several sections with the "section" class. Inside them there is content that is not thought of as immediately visible. I need that when loading my site and initializing fullpage.js I had the opportunity to scroll through my section and run GSAP timeline together with ScrollTrigger. I don't understand why scrollTrigger doesn't work inside a section with scrollOverflow = {true}. In my idea, it looks like this: the site loads, React fullpage initialization, then the section with animation scrolls (as in the codepen I attached). After gsap.timeline ends, fullpage.js sections are switched . How to implement this? I ask for help. Link to codepen: https://codepen.io/desginer123/pen/WNZLpQj Link to the current website with React fullpage.js: https://projectxmain48161.gtsb.io/ React fullpage settings.js: