Jump to content
Search Community

Too much space between sections

CindyDB test
Moderator Tag

Recommended Posts

I'm back. 

 

There are clear sections on the page and they mostly behave differently. I have set up a number of timelines to create the needed behaviours and it's pretty much working as I want it to, the problem though is that there's a lot of space between the sections. Importantly we're trying to avoid having any hard lines between sections so there are faded edges in places that obviously needs a bit of space to fade into the new section.

 

In an ideal world I'd like to have the section that's scrolling away to still be on screen when the next one starts at the bottom so that there's more continuity between the sections.

 

In the third section the blue cover from the 4th section covers the text a bit since it's slow to come off screen. How do I stop this?

 

In the section with the bubble background and the row of 8 icons, I'd like to have a video playing but I can't get it to fix in a way that doesn't require another background. 

 

Any help would be much appreciated!

See the Pen pobMMVM by themetailor (@themetailor) on CodePen

Link to comment
Share on other sites

Hey CindyDB. You've got a lot of things going on in that pen. If you'd like our help debugging please make a minimal version of your setup that focuses solely on the issue that you're having. It might be good to create a couple of different demos that focus on the different questions that you have. 

 

Alternatively you could probably hire someone to help you in your full project but that's a bit out of scope for what we're able to do for free in this forum.

  • Like 1
Link to comment
Share on other sites

 

One thing I myself can mildly guess, is that some of what appears to be happening wrong for you is related to how you set your durations and positions within your ScrollTrigger-timelines. It is not quite easy to wrap your head around that, but you can read more about how durations work on timelines/tweens that are hooked up with a ScrollTrigger that have a scrub applied and the position parameter here:

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

 

Also if you put this piece of code at the very end of your script

 

gsap.delayedCall(0.01, () => ScrollTrigger.getAll().forEach(t => console.log("Start", t.start, "End", t.end, t.vars.id)));

 

it will log the start- and end-points of all your ScrollTriggers in the dev-tools console. By doing this, I noticed, that there are quite a few ScrollTriggers overlapping - which most certainly is the cause for your sections overlapping the text of other sections - so you might wanna work on your starts and ends or if the sections are supposed to be coming in this early, set things up, so the sections don't have a background-color, that hides the content underneath.

 

 

Hope this helps you get into the right direction.

 

  • Like 3
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.
×
×
  • Create New...