elegantseagulls

I think you'll want to use GSAP's Draggable for this (observer may work for this too).
 
This thread may be helpful:

Draggable Docs here:
 

This is to prevent a horizontal scroll bar, which can mess things up (transforms vs real scroll).

If you want the box animation to be longer/tied to the pin, you'll maybe want to consider adding it as part of the timeline, and dividing the timeline's duration up to match the ratio of each animation. I updated my codepen to show how this would look:
See the Pen ExegKJN?editors=0010 by elegantseagulls (@elegantseagulls) on CodePen

Ah yes, that's cause it's taking the transformed position of the element.

 
const parallax50 = gsap.utils.toArray('.parallax50'); parallax50.forEach(lax50 => { gsap.fromTo(lax50, { yPercent: 50, }, { yPercent: -50, ease: 'none', scrollTrigger: { trigger: lax50, start: "-50% bottom", //top of element (offsetting 50% "from" transform), bottom of viewport end: "50% top", //bottom of element (offsetting -50% "to" transform), top of viewport scrub: true, markers: true, } }); });  

Hi Sukro,

Wondering if what you're seeing is FOUC, since the page will load with the HTML and CSS before it applies Javascript styles.
This article might be helpful:
 

This is because your rotation elements aren't part of your ScrollTrigger You'll want to either separate those into their own ScrollTriggers, or add this to your pin/scrub tween as a timeline like this:

 
gsap.timeline({ scrollTrigger: { scroller: pageContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", pin: true, start: "top top", end: pinWrapWidth, markers: true, }, defaults: { ease: 'none' } }) .to(".pin-wrap", { x: -horizontalScrollLength, }) .to('.anuncio1', { rotation: 360*5, },0);  

I think using gsap's quickTo would be a good solution here. If you look at the mouse-follow example, you could apply the 'follow easing logic' to your progress.
https://greensock.com/docs/v3/GSAP/gsap.quickTo()
 
You can tween a timeline's progress like this: gsap.to(timeline, { progress: desiredProgressAmount })
or quickTo would look something like this:const letterScale = gsap.quickTo(timeline, "progress", {duration: 0.6, ease: "power3"})

This could be happening if you're using React in Strict Mode. Also your GSAP syntax is using the old v2 syntax. You may consider looking at these two links:
 
GSAP v3 migration:
 
GSAP and React:
 

I cannot get your sandbox to work.

If I understand you, you're looking to scrub an animation with the scroll/wheel event rather than the actual scroll action (sounds as though you don't want to actually scroll, but hard to tell without a working demo). You may consider checking out GSAP's somewhat new Observer, which can nicely watch events (the first demo may point you in the right direction). https://greensock.com/docs/v3/Plugins/Observer

It would definitely be worth looking at the FLIP plugin an effect like this: https://greensock.com/docs/v3/Plugins/Flip

So animating height isn't very performant.
You may have better luck setting the progress bar to height: 100vh; with a transform-origin: top center; then animating the scaleY from 0

gsap.from(progressBar, { scaleY: 0, scrollTrigger: { ... }}
 
This way you wont need to calculate the window's size on refresh.

Do you have the private NPM module installed with the bonus files?

markers: false or just remove markers: true

This may be helpful if you are using ScrollTrigger, which it seems you are: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

There's a few approaches you could take for this.
 
One would be to duplicate your content line, and transform both elements together to (-)100%, then repeat that infinitely.
Details here:
 
The other thing you can do is use gsap's wrap utility and modifiers to set the out of view elements to the end of the loop. More details here:
 
Here's a simplified codepen that does this in a similar, but slightly different manner.
 

See the Pen MWJpPmP?editors=0011 by elegantseagulls (@elegantseagulls) on CodePen

So I might be missing something here, but why not just use background-attachment: fixed; in your CSS instead of gsap to animate the background-position to be fixed?

I'd look at the ScrollTrigger docs on using callbacks for using functions in your ScrollTriggers.

Have you looked at ScrollTrigger.matchMedia?
 
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

I think you mean invalidateOnRefresh (not resize). What this does, resets the starting and ending values, so if there's a change it can accommodate for that. However, in your example, you'll want your y value to be functional rather than a just a set variable that's just getting calculated once (the timeline isn't calculating the value in your example) eg:
 

scrub: 1, adds a 1s smoothing-effect to the animation, so It'll dip off the screen if you're moving fast. scrub: true, or scrub: 0, will tie it directly to your scroll position. https://greensock.com/docs/v3/Plugins/ScrollTrigger

scrub: 1, adds a 1s smoothing-effect to the animation, so It'll dip off the screen if you're moving fast. scrub: true, or scrub: 0, will tie it directly to your scroll position. https://greensock.com/docs/v3/Plugins/ScrollTrigger

scrub: 1, adds a 1s smoothing-effect to the animation, so It'll dip off the screen if you're moving fast. scrub: true, or scrub: 0, will tie it directly to your scroll position. https://greensock.com/docs/v3/Plugins/ScrollTrigger

@Kristy H If you have control over your CSS or an overwrites file, just target the classes that are applying the transitions and add transition: none;

I'm not sure why this is, but changing scrub to true instead of 0.2 seems to fix the issue. Is this expected behavior @GreenSock (cc: @OSUblake @Cassie)?

Because that animated circle text is being appended as a child of your cursor, so it's getting the scale property from its parent.

This is tricky because you'll have to tween the h3 back to its original position, or it doesn't have a context of where it's really starting from...
 
With what you have going on the forEach, you are creating a new timeline for each iteration.
 
This solution adds to a single timeline onEach, then goes back to its original position:

See the Pen JjyMpRx?editors=0110 by ryan_labar (@ryan_labar) on CodePen

Yes, you'll need to register your plugin gsap.registerPlugin(ScrollTrigger), and will also need to import the ScrollTrigger files.
 
Good info here: https://greensock.com/docs/v3/Installation
Scroll down to the GSAP 3 Install Helper and look at the Modules section (if you're using next you'll need to import from 'dist', instead).

(you also called it ScrollMagic in your original question, which is a "competitor" product to ScrollTrigger)