ScrollTrigger white spacing

[pixelarchitect 17 Likes (Newbie)]

I have created a revealing footer with a scrub text, it all works fine but there was a small thing that bothered me and I was curious about if there maybe was a different way of doing this. If you look at the white spacing on the top and the bottom of the text in the footer it is different than the padding I gave to the footer element (I set the value to 150px 0 100px 0, but it's different). In the code I said it the text block should go up 300pixels and starting point is -300px from the bottom.

In a perfect world I like to keep the padding as the space on top and the bottom the same as I chose but still reveal the text from the bottom. Someone has a solution or suggestion or idea?

 

See the Pen dyRyRQr by pixelarchitect (@pixelarchitect) on CodePen

[limbo 32 Likes (Newbie)]

You need to make sure your scrolltrigger end is reached and use the gsap.from not gsap.to IMO — it'll be is easier if you set your footer to a fixed height (which you can halve) or say 100vh, and I'd use flex to align the items center (justify-content + align-items on the flex container). Then a small change to your gsap options.

 

Something more like this perhaps?

 

See the Pen mdwdKBp by liamcrean (@liamcrean) on CodePen

 

 

[pixelarchitect 17 Likes (Newbie)]

@limbo thanks for answering, the problem is that I don't want to have a full height footer, the footer just needs to be a certain height (amount of text + 100px white space on top and bottom). It makes total sense that the tween needs to end to keep those measures, so what I think I need to figure out is how to endpoint is the amount of pixels equal the height of the variable height footer

[limbo 32 Likes (Newbie)]

Yeah. if you have fixed height, or say 50vh you can halve the values and it should work. The other trick I've learned here is to create VH/VW variables like this:

 

const vh = (coef) => window.innerHeight * (coef/100);
const vw = (coef) => window.innerWidth * (coef/100);
       

Then you can specify VH/VW units in your options like:

 

y:vh(-400)

 

(if your footer is 800px tall for example).

 

Handy.

[akapowl 4,445 Likes (Superhero)]

I'm not sure, I entirely understand how you want things to behave, but you could also just get the offsetHeight of your footer and work with that. Something like this maybe

 

See the Pen 68a5c9b3cdc68350bc027f5886774b4f by akapowl (@akapowl) on CodePen

[pixelarchitect 17 Likes (Newbie)]

That is definitely the direction I was looking for @akapowl 😄