I have a sticky element in a scroll animation that I want to have in the middle of the screen

Hey guys,

I’ve made a scroll animation where I have blocks of text that appear once the image is being show. Once you scroll further, the first text block disappears and the next one is being shown and the same for the third one.

The issue I’m having is that it’s sticky, but I want those text blocks in the middle of the screen when it’s being shown. On different screens sizes, because I used px to position them in the middle vertically, it’s not always in the middle… So I’ve set it to 320px from the top.

So basically, my question is how I can position a sticky element to make sure it’s always in the middle of the screen vertically. Should I try using % instead of px?

Sounds like you could make the sticky elements height 100vh, set display to flex, and center align.