Text reveal scrollTrigger

[mcode]

Hi to everyone, 

 

I would like your help for an animation on window resize. I am struggling to fix the issue with no luck so far.

The problem occur when I have the screen size at 900px and the text lines starting to reveal, if I resize the window the scrollTrigger not recalculate the values.

I am using "rem values" in the whole website so it's important to not use "pixels". Maybe this causes the problem... I don't know.

I will appreciate it, if anyone can give me a good advice or give me an example how to implement the same animation in a different way.

 

Thanks in advance,

 

 

See the Pen vYWmJYw?editors=1010 by gtara (@gtara) on CodePen

[OSUblake]

Hi mcode, 

 

invalidateOnRefresh isn't going to update those values unless you use functions. And you will most likely need to update titleWidth as that would be a stale value.

end: this.titleWidth + window.innerWidth

 

[mcode]

Hi Osublake!,

 

Thanks for the quick answer!

As I  understand  the class "tt-scroll__title" not update the correct values on window resize. Am I right.. or am I missing something else?

I have created a new window Resize function to recalculate the "this.titleWidth" but the problem still occurs.

Can you please give me an example on how I can update those values? 

 

Thanks in advance!

[OSUblake]

Sorry, I should have posted code that shows that anything that is dynamic needs a function like this...

end: () => this.titleWidth + window.innerWidth

 

[mcode]

I've tried to add the function () => like you said, but it doesn't work. Can you check again the codepen if I am missing something? I have already save the changes. 

 

Thanks in advance! 

[OSUblake]

You've got a lot of stuff going on in that pen, so I'm not exactly sure what you're looking for.

 

One thing I noticed is that you have a percentage based transform set in your CSS, but GSAP doesn't know that because of how the browser reports transforms as a matrix.

 

So I set the transforms with GSAP and then use yPercent to animate. Is that the problem you were referring to?

 

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

 

[mcode]

Yes! Thanks so much OSU blake, you are a hero! 🙏

I really I appreciate it!!

[mcode]

Hello again! OSU blake i have add sections above section with animation and nothing works well. You can see the markers loss the position. I cant find the problem caused that!

I have made a copy from your codepen.

See the Pen vYWmJYw by gtara (@gtara) on CodePen

Can you help me?

Thanks in advanced!

 

[OSUblake]

Hi mcode,

 

It's looks like you just need to make those end values relative to trigger using "+=".

 

end: () => "+=" + (this.titleWidth + window.innerWidth)