Fullscreen slides with TweenLite, CSSPlugin and ScrollToPlugin

[Yngwie]

Hi!

This is excellent starter for playing with fullscreen sections transitions. But I have one question...

For example, if we have 6 sections and 2 of them require more height than the screen size is (because of the content).How

to achieve effect of scrolling to the end of that section first and then start transition to next section?

Basically what I meaned, is it possible to have sections with different heights based on the content and then, when

we scroll to the end of that content, start transition to next section in the way which is presented in this demo? 

 

Thanx!

See the Pen kDvmC by bassta (@bassta) on CodePen

[PointC]

I assume you're talking about the wheel event, right?

 

Yes, you could do that. You'd have to add some logic to check the height of the current active section and only fire the scrollTo the next section if the bottom of the active section is above or equal to the bottom of the window.

 

Hopefully that makes sense. Happy tweening.

[Visual-Q]

If you don't need the slidecontainer wrapper you can get rid of it and scroll the window instead.

Then you could use jquery to get the offset position of the slides and scroll the window to that. 

 

 

 

See the Pen PLpoBp by Visual-Q (@Visual-Q) on CodePen

 

 

UPDATE: DOH I see I didn't read the original question entirely this only gets you part way solving for scrolling different sized sections, to scroll normally to the bottom of an oversized item you would also have to do as Craig said and test the position of the current slide against the window:

 

This might help:

https://stackoverflow.com/questions/4653911/jquery-detecting-if-the-bottom-of-the-div-is-touching-the-bottom-of-the-browse

 

and then you need to attach the logic to the mousewheel event listener to prevent the goto slide functions from firing until it hits the bottom of an item. You'd probably also want to test it in reverse to be able to scroll up normally as well in these instances.

 

Another easier way might be to look at using scrollMagic and triggers to fire the scrolls as opposed to the current event listeners.

[Yngwie]

Excellent. I will try those solutions with checking the height of sections and wheel event in both

directions, scrolling up and down.

 

Thank you for suggestions!

[Oksana Romaniv]

This solution has a bug: when you scroll page by dragging the scrollbar and then scroll to using a wheel, the window will scroll to the next/prev section "in cache", not to the next/previous section based on the window scroll position.

[Visual-Q]

1 hour ago, Oksana Romaniv said:

This solution has a bug: when you scroll page by dragging the scrollbar and then scroll to using a wheel, the window will scroll to the next/prev section "in cache", not to the next/previous section based on the window scroll position.

 

Realistically you'd probably want to avoid having the scrollbar altogether for something like this. Something like this  on the body would do it overflow-y:hidden; 

 

 

See the Pen VRrpdR by Visual-Q (@Visual-Q) on CodePen

 

Otherwise you'd need to add some logic keeping track of where the slides are in the window when using the scrollbar to determine which slide the scroll actions want to target. 

 

NOTE this was only just a quick example of how you might address different sized sections, to make it production ready you'd need to examine all the possible interactions and points of potential failure and add the logic to counter them.