pinning text on scroll horizontal

[Nora]

Hello, I'm Trying to pinning text in center of screen on horizontal scroll  but pin and fixed position not working.. how can I pin element on scroll horizontal?

See the Pen abRydJE by noX10M (@noX10M) on CodePen

[Rodrigo]

Hi,

 

Pinning is a very complex situation and it normally works for vertical scenarios. In this case also you have a fixed position inside a transformed element and that doesn't work in the normal way fixed elements do:

https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children

 

The one option I can think of is to put the element you want pinned in an absolute positioned container and then animate that one as you animate the horizontal elements, in the oposite direction. Using xPercent should make this super simple. Here is a fork of your codepen showing that approach:

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

 

I'm pretty sure that there could be more approaches to accomplish this, but this is the one I can think of right of the bat.

Hopefully this helps.

Happy Tweening!

[Nora]

Thank you!

[webenaco_Dev]

Hi everyone, starting from this example is it possible to "mask" the text in the section-1 step to make it change the color?

Here I attach an example https://www.aquapetra.com/ (by scrolling there is a text section with horizontal scroll) that I would like to replicate but I don't understand the logic behind doing this animation

thanks for any support

[mvaneijgen]

Hi @webenaco_Dev you could do this multiple ways. 

 

The route I would go is having two layers on top of each other (with the two different colors) and then animating the CSS clip-path of the top most element. I really like the following tool to create my clip-paths  https://bennettfeely.com/clippy/ and keep in mind if you want to animate between two complex strings in GSAP the strings must have the same value (eg give all numbers a % sign even if it is not needed by the browser). 

 

If you still have trouble be sure to post a minimal demo with what you've treid, that way we can see your thought process and thus better help you understand the tools!

 

I also recommend creating a new topic and reference this one if you think it is relevant. Hope it helps and happy tweening! 

 

 

 

[webenaco_Dev]

Thanks @mvaneijgen, your tip on the clip path helped me find the solution!