text pinning using scrolltrigger

[Sikriti Dakua]

Hello,

I am trying to recreate the text scroll effect from this website (https://synthetic-humans.ai/) using ScollTrigger but I cannot figure out how the text is pinned at the center. 

 

Here is what I came up with 

 

I also tried making the sections fixed and increasing the body height based on how many sections were present but the animation state was already finished

See the Pen ExJOLgx?editors=0010 by dev_loop (@dev_loop) on CodePen

[mvaneijgen]

Hi @Sikriti Dakua welcome to the forum!

 

What is the part you're having trouble with? In your example you have different coloured sections which each there own text, but in the example you share all the text is all just stacked right on tof of each other. If that is what you want check out my card stacking tutorial of course swap out the cards for just text, but the logic should be the same. With CSS make all the text stack right on top of each other and then just animate them in and out one by one. 

 

Also keep in mind the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Hope it helps and happy tweening, but if you still need help be sure to post back here with what you've tried!

 

 

[Sikriti Dakua]

12 hours ago, mvaneijgen said:

Hi @Sikriti Dakua welcome to the forum!

 

What is the part you're having trouble with? In your example you have different coloured sections which each there own text, but in the example you share all the text is all just stacked right on tof of each other. If that is what you want check out my card stacking tutorial of course swap out the cards for just text, but the logic should be the same. With CSS make all the text stack right on top of each other and then just animate them in and out one by one. 

 

Also keep in mind the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Hope it helps and happy tweening, but if you still need help be sure to post back here with what you've tried!

 

 

Hi @mvaneijgen Thanks for replying!

 

As mentioned above, I was trying to achieve the text scrubbing effect from the website. so as I scroll the text will reveal.

 

I have updated the demo now after reading your feedback. The text is now stacked on top of each other but I am having a hard time figuring out how to link it to the scroll.  Maybe I am missing something. 

 

Currently, It kind of works but after scrolling some amount the section starts scrolling top. I cannot figure out why it's happening 

 

Here's the updated demo 

 

See the Pen ExJOLgx by dev_loop (@dev_loop) on CodePen

[mvaneijgen]

You where almost there!

 

I've move your timeline outside the loop and add the ScrollTrigger logic to the one timeline, then I've add all your tweens to that one timeline and let ScrollTrigger control it. Does that make sense? Hope it helps and happy tweening! 

 

See the Pen qBwLJXX?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Sikriti Dakua]

Many Thanks, @mvaneijgen

 

Though it is a little fast now I think I can manage to fix that myself 

Thank you very much for answering my doubts.

 

Have a good day!

[mvaneijgen]

Yeah that is an easy fix, check out the video below if you need any help