Extending Div on Scroll

[johannes_m]

Good day,

 

I'm new to GSAP and wanted to see if someone can point me in the right direction here. 

I'd like to extend a div in height on scroll, after the end of the page has been reached.

 

I looked through the forum and examples, but didn't quite find what I'd like to archive. 

 

Appreciate any help!

 

Thanks, 

Johannes

See the Pen eYJLpbJ by hpmacher (@hpmacher) on CodePen

[ZachSaucier]

Hey Johannes and welcome to the GreenSock forums.

 

ScrollMagic is not a GreenSock product and we don't recommend using it. We highly recommend the official scroll plugin for GSAP: ScrollTrigger!

 

Make sure you're using the latest version of GSAP to use it. GSAP 3 also has a smaller file size and a bunch of other new features.

 

Here's a basic example of a ScrollTrigger animation animate an element's height:

See the Pen pogOyQO by GreenSock (@GreenSock) on CodePen

[johannes_m]

Hi Zach, 

 

Thank you very much. This helps me a lot to get started!

 

Is there a way to move the "scroller-start" marker to a different position or move "start" marker to -50vh from the bottom of the page?

I'd like to start the scroll animation / start extending the div once a user has reached the very bottom of the page. 

 

I also found a way to change the opacity of my background-color while scrolling here in the forum. This is fantastic!

 

Thanks again!

 

Johannes

[ZachSaucier]

4 minutes ago, johannes_m said:

Is there a way to move the "scroller-start" marker to a different position or move "start" marker to -50vh from the bottom of the page?

Sure, you just need to change the start position of the ScrollTrigger. I highly recommend reading the documentation and watching the video that's included. It will help get you understand how it works and get going in very little time  

[johannes_m]

Hey Zach,

I went through the video, and it was very helpful!

Should have done that right away. I love GSAP, this is next level, I will use it much more from now on.

 

I have now created almost exactly what I wanted.

There's one thing I can't seem to figure out.

 

My container (.referenz-transition) which extends in height has a black-transparent background, but now the .pin-spacer creates a space below without the black-transparent background. I've tried adding pinSpacing: false, but it doesn't make the container move anymore. 

Setting height to 100vh, gives the container the correct black-transparent background, but then it doesn't stop at the top and the footer moves away.

 

Same with keeping the text vertically centered within the container. 
 

My updated Codepen demo 

See the Pen eYJLpbJ by hpmacher (@hpmacher) on CodePen

 

 

Could you please give me a last hint how I could make this work?

 

Thanks

Johannes

[ZachSaucier]

1 hour ago, johannes_m said:

I love GSAP, this is next level, I will use it much more from now on.

We're so glad to hear that!

 

I'd actually approach your situation completely differently: I'd try to absolutely position the footer where it starts, make the link as large as it should be at the end to start, and then pin the footer when it's scrolled to. That way you don't have to animate any heights and have better control over how long the ScrollTrigger animates for. 

 

Sorry I would create a demo for you but dinner is being served  It looks delicious.

[ZachSaucier]

Here's a demo of what I was talking about:

See the Pen ZEQMVbW?editors=0010 by GreenSock (@GreenSock) on CodePen