noviedo

Hey Lounes, you can usegsap.quickTo()instead of use gsap.quickSetter() in this way you can use duration and ease for that. I leave here a fork of your pen with the changes applied. I hope that helps you!
 

See the Pen ExeyQgP by nazarenooviedo (@nazarenooviedo) on CodePen

Hey @Ryan Lee, how's going? I just add a ResizeObserver in your code to listen to the ".viewport" size changes. Also, I wrapped the ScrollTrigger.refresh() into a delayedCall() just to simulate a debounce function.

 
const container = document.querySelector(".viewport"); const resizeObserver = new ResizeObserver((entries) => { gsap.delayedCall(0.2, () => { ScrollTrigger.refresh(); }); }); resizeObserver.observe(container);
 
I don't know in which framework you are working, but please, don't remember to clean up the resizeObserver, just to keep clean the memory.
resizeObserver.disconnect()

I hope this helps you!.
 

See the Pen poLJvga by nazarenooviedo (@nazarenooviedo) on CodePen

Hey @cereal_beast, how's going?

You are using a .from() function, so in this way, you will never get the correct autoAlpha because you are set the opacity in 0, probably you will need to use a .to() function to trigger the opacity. I did a quick fork from your pen and fixed it, just check it.
 
I fixed your syntaxis regarding the duration position, and also I split the animation into two tweens, a from() function for all properties and just a to() function to the autoAlpha. With the last parameter in the to() tween ('<') we reach to execute both tweens at the same time.

I hope helps you!
 

See the Pen mdxJdad by nazarenooviedo (@nazarenooviedo) on CodePen

Hey @cereal_beast, how's going?

You are using a .from() function, so in this way, you will never get the correct autoAlpha because you are set the opacity in 0, probably you will need to use a .to() function to trigger the opacity. I did a quick fork from your pen and fixed it, just check it.
 
I fixed your syntaxis regarding the duration position, and also I split the animation into two tweens, a from() function for all properties and just a to() function to the autoAlpha. With the last parameter in the to() tween ('<') we reach to execute both tweens at the same time.

I hope helps you!
 

See the Pen mdxJdad by nazarenooviedo (@nazarenooviedo) on CodePen

Hey @nthpolygon how is going?? I leave here an example with 2 alternatives, but the onComplete should be doing the same thing.
 
Using onComplete:
 
const tween = gsap.from(["h1", "p"], { yPercent: 30, autoAlpha: 0, stagger: 0.1, paused: true }); gsap.to("body", {   autoAlpha: 1,   duration: 0.5,   onComplete: () => {     tween.play();   } }); Using .then():
 
const tween = gsap.from(["h1", "p"], { yPercent: 30, autoAlpha: 0, stagger: 0.1, paused: true }); gsap   .to("body", {     autoAlpha: 1,     duration: 0.5   })   .then(() => {     tween.play();   });
I leave here the Codepen:

See the Pen mdXZMQg by nazarenooviedo (@nazarenooviedo) on CodePen

Hey @andsavu, I leave here a pen with a solution for your issue, so, as you can see I did a correct bind for ScrollTrigger and Smooth-Scrollbar, if you will use just a horizontal scroll you need to do this:
 
// Setup Scrollbar const scroller = document.querySelector("#scrollbar"); const bodyScrollBar = Scrollbar.init(scroller, { overscrollEffect: "bounce", alwaysShowTracks: true, delegateTo: document }); ScrollTrigger.scrollerProxy(scroller, { scrollLeft(value) { if (arguments.length) { bodyScrollBar.scrollLeft = value; } return bodyScrollBar.scrollLeft; } }); Then we need to bind the listeners and a quick default setup for ScrollTrigger to enable the horizontal scroll and setup a scroller.
bodyScrollBar.addListener(ScrollTrigger.update); ScrollTrigger.defaults({ scroller: scroller, horizontal: true }); And also I added some stuff to improve the code, for example with this line you can be sure to avoid all time the yAxis. 
bodyScrollBar.track.yAxis.element.remove();
Codepen:

See the Pen YzWgJWw by nazarenooviedo (@nazarenooviedo) on CodePen


I hope to help you 🙂

Thanks so much! you gave me a great idea, I just use a a fixed width for the viewBox and just move the inner group along x axis.
 
Thanks!