make panel visible when scroll trigger start hits the center

[nami]

Hey!

So as you can see in this code pen, it has a very nice transition of panels when it scrolls, but when the start marker hits the scroller-start marker at the center exactly the panel is still invisible. The items appear when that start marker  gets past the center.

 

My question is: Is there a way to show the div when the start marker is exactly at the center and not wait until it gets  past it?

 

I hope my question was clear

See the Pen b6f163b464502cef5b5ac411394b120b by akapowl (@akapowl) on CodePen

[GreenSock]

Hi @nami. Are you saying you think the "start" is literally 1 pixel off or something? If I understand your goal correctly, you could simply do 50%-=1px or something. It's pretty flexible. 

[nami]

See the Pen MWJqEeo by imane-ben (@imane-ben) on CodePen

 

So many things are wrong now,

I have tried your solution and i guess it works,  but between every panel, some weird spacing gets added ( between the end of one panel and the start of the other). Not sure what is causing it.

Also, how do i slow down the scrolling on the horizontal scroll so the last and first panel can stay a bit on the view port? I have tried the duration attribute and setting the scrubbing to 5 for instance but it didn't seem to do much.

 

Many thanks.

[GreenSock]

13 hours ago, nami said:

some weird spacing gets added ( between the end of one panel and the start of the other). Not sure what is causing it.

I'm not quite sure what you mean. There's over 200 lines of JS - can you provide a more minimal demo that only shows this one issue (and doesn't try to do all the other stuff like animations and Draggable and horizontal scrolls, etc.)? 

 

It looks like you're pinning the panels, but you disabled pinSpacing, so that'll create overlaps logically. In other words, your element will get pinned for a while, but the thing under it will keep scrolling up (hence the overlap). That's not a bug. Maybe you should delete the pinSpacing: false line. 

 

13 hours ago, nami said:

how do i slow down the scrolling on the horizontal scroll

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

 

You should adjust the "end" value accordingly, not the duration of your animations. Like:

// OLD
end: () => "+=" + scrollContainer.offsetWidth,
  
// NEW
end: () => "+=" + scrollContainer.offsetWidth * 2, // twice as long
    
// OR hard-code a certain value
end: "+=3000"

• You're using mis-matched versions of things (3.3.1 of most things, but 3.6.1 of Draggable). I'd strongly recommend using the latest version of everything (3.6.1). In fact, some of the snapping features you're trying to tap into didn't exist in 3.3.1. 
• You tried setting duration:"150%" and an opacity on a ScrollTrigger, but those are invalid. There are no such properties on a ScrollTrigger. 
• You were creating the ScrollTriggers out-of-order. We STRONGLY recommend creating them in the order they appear on the page, but if you can't do that, you can usually work around it by calling ScrollTrigger.sort() after you're done creating them all. 

14 hours ago, nami said:

so the last and first panel can stay a bit on the view port? I have tried the duration attribute and setting the scrubbing to 5 for instance but it didn't seem to do much.

 

You want the first and last horizontally-scrolling sections to stay still for a while? You'd just need to put the horizontal scroll into a timeline that has some extra [empty] space in the beginning and end for whatever proportion you want them to stay stuck. 

 

I'm not really sure what effects you were aiming for, but here's a fork of your CodePen that has some of the fixes in place: 

See the Pen 39d23ae68266036e95d4defaaec656e8 by GreenSock (@GreenSock) on CodePen

 

Good luck!