elegantseagulls

Your fromTo needs more information, but it looks to me like you can just use a to animation for this. Example:
 
gsap.to( ".right-door", { opacity: 0.85, scrollTrigger: { trigger: ".right-door", scrub: true, start: "top top" }, xPercent: -50 } );  

Adding ease: 'steps(1)'  to your from and to will fix this, otherwise you can change duration to 0 and add a delay.

Looks like maybe fouc to me? You'll want to set your initial css property to visibility: hidden; Better details here:
 
 

Using from is probably a better bet for this animation:
to lengthen duration, you'll want to add a duration: to your tweens.

See the Pen NWLmGbO?editors=0110 by elegantseagulls (@elegantseagulls) on CodePen
 
I'm a bit confused as to what you're looking for for "#3"

Looks like the docs have Stepped ease as:
ease: "steps(1)"

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