Jump to content


ScrollTrigger white spacing

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

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



  • Like 4
Link to comment
Share on other sites

@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

Link to comment
Share on other sites

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:




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



  • Like 1
Link to comment
Share on other sites

  • Solution

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

  • Like 6
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.