Scroll from section to section with variable height

[Jc Denton]

Hi all! I want to implement a site with scrolling from section to section (with a height equal to the height of the screen) using a gsap.to, provided that there are sections whose height can be either less or greater than the height of the screen. In general, it is somewhat similar to FullPage, but I don’t quite like its functionality and how it works in general. I made an example in CodePen. Here section_4 has a large height, and upon reaching this section everything works fine, but when scrolling back everything breaks...

 

What am i doing wrong?

See the Pen ExMqZrG by Jc_Denton (@Jc_Denton) on CodePen

[Rodrigo]

Hi @Jc Denton and welcome to the GSAP Forums!

 

I'm not 100% sure how feasible this is, at least not in a simple way. It must be possible but it could require quite a bit of custom logic, but again I'm not sure.

 

We have this demo that predicates on every section's height being 100vh with the snapping you're looking for:

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

 

The issue is that IDK, at the top of my head, how to make this work with different heights TBH.

 

Then we have this demo that layers the elements with different heights but there is no jump to section in them:

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

 

It's a matter of mix and matching that, again, I don't know right now how to approach in a quick and simple way.

 

I'll see if I can think of something or if another user can chime in and shed some light on this.

 

Sorry I can't be of more assistance.

Happy Tweening!