Section scrolling with parallax using ScrollTrigger is not working as expected.

[Krishnakant]

I am not able to get this simple thing working. Basically I want to have sections with parallax effect without leaving the space at the bottom of the page. I have the sections overlapped initially. But either they all move by equal amount or leave white-space in-between which is not desirable. Going forward I also want the Orange section to get pinned. Please guide me on how all of this can be implemented.

See the Pen qBvWYzL by designjuice (@designjuice) on CodePen

[mvaneijgen]

Check out this post, it will probably work also for your setup 

 

[Krishnakant]

Hi,

 

Thank you so much for your suggestion. I have modified the CodePen - but it still not working as expected. It leaves white space at the very bottom of the page. Can you please look at it and suggest the changes to be done?

[mvaneijgen]

Are you looking for something like this? 

 

See the Pen vYPBqNg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Krishnakant]

Yes! Something like this but with some slight modifications. I tried to modify a bit but it the issue of leaving white space comes back again.

 

Basically I want to have all the cards of min-height of 100svh and the first card needs to be fully visible on load. So its not exactly to be visualized as 'stack of cards' with the first one being at very bottom of the stack initially. The cards need to stack but not till all the way till the top of another card. If I modify, it again leaves blank space OR leaves gap in-between - I tried changing the logic (possibly I could think of) but could not achieve it. To add to this - I have one more requirement, and that is to have one slide/card to be sticky (pinned) on scrolling preferably without altering the parallax effect.

 

I have updated it in the same Code-Pen (taking your code). Please take a look and suggest.

 

And thank you once again for your time - much appreciated !

Edited December 23, 2023 by Krishnakant
Codepen link added in line was not showing up, not sure why.

[mvaneijgen]

Would love to see the none working versions, that way we can see your thought process and thus better help you understand the tools. 

 

Having them full height is even easier, now they all can be just barely offscreen with window.innerHeight.

 

I've over complicated my example a bit just to show you can can create what ever tween you like for each card, my original example was with one tween and some fancy staggers, but some times it is just easier to write the animation you want for each card out by hand, just to get a feeling for what it is you want to happen.

 

What I see a lot (and also do my self sometimes) is trying to optimise the code before it is even working, but then I remember you need to have working code before you can optimize!

 

Hope it helps and happy tweening! 

 

See the Pen VwRwGdB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen