ryan_labar

Most fonts have different widths for each character, which will cause the text to change widths as the characters change. A Monospace typeface will is the easiest fix for this: most font libraries have a filter for this if you need something more custom, but you can use your system's default by this to your CSS:
font-family: monospace;

Yes, translating the y value here is causing the wires to get a bit crossed. You could consider using yPercent to avoid this: gsap.to(card, { yPercent: -progress * 6.25 })
I got the 6.25 value by: (desired y value) / (card height) * 100 to get the percentage. 25/400*100.

I'm thinking that because you're using draggable to modify an animation, you'll want to setup a proxy element to use as your draggable item to update the slider's position. Similar to what's happening here:
See the Pen GRxNJGK?editors=0010 by elegantseagulls (@elegantseagulls) on CodePen
and See the Pen gOvvJee by GreenSock (@GreenSock) on CodePen
and See the Pen WNedayo by GreenSock (@GreenSock) on CodePen

With this you are setting the entire block of text to opacity: 0 and never setting the block back to opacity: 1. You could just add autoAlpha: 0 in the from part of the fromTo object, and that should do it.:
 
gsap.set(split.chars, { transformOrigin: "center -160px", z: 0.1, } split.chars.forEach((char, i) => { tl2.fromTo(char, { autoAlpha: 0, rotation: ((Math.random() < 0.5) ? 90 : -90) }, { rotation: 0, autoAlpha: 1, duration: 2.4, ease:'elastic.out', }, 0.3 + i * 0.06); } This is, however, a reason to set the opacity initially with CSS, and that is FOUC. More on that here: https://gsap.com/resources/fouc

Are you looking for something like this?
See the Pen eYpOZvX by GreenSock (@GreenSock) on CodePen


  Learn more here: https://gsap.com/docs/v3/Plugins/ScrollTrigger/

Hi @DhavalV

ScrollSmoother is a Club GSAP plugin so you'll need to import that from GSAP's private NPM.

More info here: https://gsap.com/pricing/
and here: https://gsap.com/docs/v3/Installation

 

Hi @gringo_pablo
 
You need to call the ScrollTrigger.refresh() after the layout is changed so it can make the proper adjustments:
 
btns[0].addEventListener("click", () => { section1.style.display = "block"; section2.style.display = "none"; ScrollTrigger.refresh(); }); btns[1].addEventListener("click", () => { section1.style.display = "none"; section2.style.display = "block"; ScrollTrigger.refresh(); });