Parallax background with pinned content

[FrancisBacon]

Hello, 

I'm trying to recreate this parallax background with pinned text effect on this site "https://selemen.liqium.com/" (screenshot attached)

the problem I'm facing is that the headings are not pinned properly. upon comparing both via developer's tool I found out that Selemen website's titles are not getting position fixed while I'm trying to pin the headings. Not sure if it's related to scrolltrigger or not.

If anyone can explain something or give any leads that'll be very helpful.

Thanks in advance.

See the Pen eYavBeB by rohaidAli (@rohaidAli) on CodePen

[mvaneijgen]

You'll have to create an animation that will clip the text at the correct moment. Clip path is great for that I always use this tool to create my clip-paths https://bennettfeely.com/clippy/ only thing you'll have to remember that you can only animate if the clip path has the same amount of points and all values must be suffixed with the same measurement eg all values in this case get a % suffixed (even 0 where it doesn't really need it, but GSAP needs this for complex string animations).

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them! Right now I've hard coded some values, I personally like to do this because this allows me to fork my work and have a known working version, so that when I make this dynamic and it is not working I can test it against my hardcoded values to see what is going wrong. I'll leave the rest for you to thinker with. Hope it helps and happy tweening! 

 

See the Pen GRaWmea?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen