Consistent design across several screen sizes

[Volt 22]

Hello 

 

From the codepen, I have a scrolltrigger animation where the headers scroll to both sides of a pinned image. I want the headers to scroll and have about 50% of the headers hidden, with the image in-between, and some sort of horizontal center alignment of both the image and the headers when the scroll animation is complete. And I want this to be consistent across all screen sizes.

 

Just like it is on the site: https://defundtigraygenocide.com/

I'm trying to recreate it for practice - https://defund-tigray.webflow.io/

Please, how do I achieve this? 

Thank you.

See the Pen NWyyqLm?editors=1000 by voltmeup (@voltmeup) on CodePen

[Cassie]

Hey there! Nice work recreating this. It's a lovely site.

 

I think you're after functional values and invalidateOnRefresh()

Let me know if this helps!
 

 

[Volt 22]

Thank you Cassie. That helped.

[Cassie]

Glad to hear!

[Volt 22]

Hello Cassie,

 

How do I align all the headers with equal spacing on either sides of the image. 
From the sample site, notice how the last header with text content 'genocide' scrolls to align with the header 'when war' towards the end of the animation.

[Cassie]

Heya! There's not really a magic formula to this really. I'd just tweak the values until it's visually in the right place.

Animation is 99% tweaking values until it looks/feels right - Good luck!

[Volt 22]

Alright Cassie,

 

Thanks again for the response, I'll keep tweaking then.