Trapti

Hi, 

I changed the approach to this animation. Check pen. Created a single timeline for all the text animation and triggered it for ".hero" section. I felt having scrolltrigger for all the texts is way too much. Change the duration and the stagger value if it is required. Also setting grey color for text on CSS and changing to black with JS is not great idea. If JS does not load than text will look faded and will not be readable for some users. 

See the Pen LYMLVZM by tripti1410 (@tripti1410) on CodePen
 
 
Here is with splitText plugin. Spliting text manually just for animation is not great. 

See the Pen MWZoamx by tripti1410 (@tripti1410) on CodePen
Hope it helps!
 

Hi, 
 
Here is the updated version of your pen. Hope it helps. I removed a bunch of unnecessary CSS. 

See the Pen XWoLRNE by tripti1410 (@tripti1410) on CodePen
 

So remove the scroll trigger code and keep only the next and prev click functionality. 

Hi, 

If I understood the problem right then this is the problem. 
In the given code: 
- In CSS the visibility is set to hidden to the main class. But in Js its never set to visible.
- From tween been used from Autoalpha 0 which is making them hidden initially.  And this has been applied to the individual chars not to the parent. 
These two things were messing. 
Solution:
- In CSS add "visibility" and "opacity" to "hidden" and "0" to the ".txtMain" and ".txtMain2". 
- Using GSAP ".set" make it visible using "autoalpha" to the ".txtMain" and ".txtMain2".
Here is the code. 
See the Pen eYbgpEd by tripti1410 (@tripti1410) on CodePen
   
Hope it helped! 
 
 
 
 

It was not ending at the top. It was going back to its original position where it had been placed. I added some content above this text to change the position of this text on the page and the start trigger. You can check the pen. 

Hi, 
 
Here is pen I created some time back for the same effect. This might not be the perfect one, but you will get some idea. 
 

See the Pen QWJvxRE by tripti1410 (@tripti1410) on CodePen

Hi, 
Wrap panels in a div. Below is the example. I hope I understood the problem right. 

See the Pen YzdWazd?editors=1010 by tripti1410 (@tripti1410) on CodePen

Hi,
Because structurally it is inside the first panel. Keep it outside of panels. 
 

See the Pen rNrjrRb by tripti1410 (@tripti1410) on CodePen

Tailwind's 'hidden' class sets the 'display: none' property. GSAP 'autoAlpha' sets 'visibility' and 'opacity' property. Basically you are dealing with two diff properties so how will they override. 

tl.fromTo( ".main-wrapper", { blur: 20, }, { blur: 0, duration: 5, ease: "bounce.in" } ) .fromTo( ".main-wrapper", { opacity: 0 }, { opacity: 1, duration: 5, ease: "linear" }, "<" ); One way is to create a different tween for that. 

Hi, 
In the project style components is being used, which changes the class names to some random string. And in the code target class is .boxes so GSAP could not find that class name. Check the browser console it gives the warning.
 
Below forked codesandbox of yours but without styleComponents. If you can figure out how to configure style components to not convert certain class it will work. Sorry I don't have in depth knowledge in that. 
https://codesandbox.io/s/target-multiple-componets-react-gsap-forked-1f9656?file=/components/ColoredBox.js 

There is a syntax error. In HTML 
<h2 id="#heading2">Das ist ein krasser Text</h2> should be 
<h2 id="heading2">Das ist ein krasser Text</h2> change this and your animation will play

See the Pen poKPKZx?editors=1010 by tripti1410 (@tripti1410) on CodePen

Hi, 
here is a forked pen 
See the Pen dyKvbOp?editors=1010 by tripti1410 (@tripti1410) on CodePen
   
To see the effect clearly I added rotation for the underline. 
I have made changes in line 10 and 11
 
Hope this helps. 
Happy tweening!

Hi, 
Is this what you want to achieve 
See the Pen xxzgqde by tripti1410 (@tripti1410) on CodePen
   
onEnter syntax is wrong, it needs function. 
 
I added this opacity on scrub if you want you can remove also. If you want to add opacity on onEnter it will look something like this. Also there was a syntax error on your codepen  I corrected that. 
onEnter: () => gsap.from(sticky, {opacity: 0.2, duration: 1})  

Here is a forked codepen. As per my knowledge, we  cannot reflect using CSS. I changed the graphics direction in editor. 
For reverse I think you can use other graphic and move that for reverse and club these in a timeline.

See the Pen ZEROvNQ?editors=1010 by tripti1410 (@tripti1410) on CodePen

hey, 
The code is not correct. 
In gsap.to tween the target is ".char" class which is not being defined anywhere. If you want to define it, do this and use a class name. This class name will get applied to each character. 
 
const myText = new SplitType('#my-text', {type: "chars, words",charsClass: "yourCharClass"}) gsap.to(".yourCharClass", { .... }) Or simply access each character by doing this. 
const myText = new SplitType('#my-text', {type: "chars, words"}) gsap.to(myText.chars, { .... }) Please check documentation and code examples here. 

 

Hey, Welcome to the forum!
It is recommended to create minimal demo of the problem.

here is sample pen adjust the end value for how much you wanna let user scroll the first section.  
See the Pen d2f8c413883bab0a26134845e337fe10?editors=1010 by tripti1410 (@tripti1410) on CodePen
 

Hey,

In GSAP you can use .scroll() for the same. 
Here is the example. 

See the Pen QWaEwEd??editors=0010 by tripti1410 (@tripti1410) on CodePen

Hey, welcome to forum @theRemy79  
You are trying to pause tl which you are using again inside a gsap.to tween.  You assign the gsap.to tween to a variable a then apply play and pause. 
See the below pen

See the Pen 1bbeafecae5a5c69dd2bbf9cebbc8f62?editors=0011 by tripti1410 (@tripti1410) on CodePen