Animate one element with multiple scrollTrigger

[RedSmoke19]

Friends, hello everyone!
Please help me figure out how scroll Trigger works. I'm new here and I really need your help. I've been trying to make this animation for more than a few hours and I can't figure it out.

I have several timelines. In one of the timeline (tl2 and tl3; tl3 and 4) In them I try to animate the same text elements. I want to achieve such an effect when for one timeline I have a text from yPercent: 400 to y Percent: 0, and in another timeline the same text is shown but from 0 to - 300. But when I scroll to the second text element, it resets my position and breaks all the logic and animation (I read on the forum about the immediateRender: false, but it doesn't help for me(

What do I need to do to make it work for me and how can I improve this code ?

I will be very grateful and grateful to you if you help me find a solution to my problem and problem

See the Pen wvmLpLr by oleg-cyganow (@oleg-cyganow) on CodePen

[Cassie]

Hi there, welcome to the forums -

Now, I'm not certain what your end goal is I'm afraid. But it looks like your start and end positions are a bit muddled

Maybe you're trying to do something like this?

See the Pen xxWoPOL by GreenSock (@GreenSock) on CodePen

 

Also - have you checked out the scrolltrigger video from the docs?

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

[RedSmoke19]

@Cassie Thank you so much for the answer. Yes, I want to achieve something like this effect, but so that the text does not disappear immediately when it appears. I want to make it so that when I scroll the page, I have a test from the bottom up, when the text reaches the center, it freezes for a short time and after that, when I continue scrolling, the text goes up and a new one appears from the bottom

[Cassie]

That sounds doable! Have you watched the video on ScrollTrigger on the docs page?

[RedSmoke19]

Yes, I watched the initial video several times, but alas, I did not understand how to make the text freeze in the center at first, but the next scrollTrigger did this text from the zero position in -400. Now when the second scroll Triggered takes control of the first text, its position is reset to the beginning (

[Cassie]

Like this?

See the Pen xxWoPOL?editors=0110 by GreenSock (@GreenSock) on CodePen

There's many ways to get text to 'freeze' - either by pinning or adjusting the animation so there's a short gap.

Your overlapping issue is coming from the fact that your elements are all on top of each other and your markers aren't spaced correctly. A large part of success with ScrollTrigger comes from setting up your styles correctly for what you're trying to accomplish. Without JS your page doesn't scroll at all and the markers are set up pretty inconsistently 

See the Pen JjLQVQg by GreenSock (@GreenSock) on CodePen

[RedSmoke19]

@Cassie Thank you very much for your help! I will continue to understand gsap and your example. It seems to be exactly what I needed.