ScrollJacking

[Vineeth Achari]

How to create a ScrollJacking (Fullscreen page scroll) effect like Huge.

https://www.hugeinc.com/

[Shaun Gorneau]

HI @Vineeth Achari,

 

The example provided at hugeinc.com is pretty straight forward. At a basic level, you'll want to either kill the default scroll behavior, or contain everything in a parent element that has a height/width of 100% and overflow hidden. Then, whenever the scroll delta meets a minimum threshold, you can fire off a GSAP tween to move (tween the `y` property) of the stacked elements (each of those are also width/height 100% inside the container), -/+ the height of the a panel element.

 

You'll want to detect if the user is at scrollTop 0 before allowing a tween +y to (reverse) ... and also determine if the scrollTop is at its limit (  panel height * (number of panels - 1 ) ) before allowing any advance (forward).

 

Hope this helps.

 

Shaun

[PointC]

I have a thread with some sliders which may prove helpful.

Happy tweening.

 

[Vineeth Achari]

17 hours ago, Shaun Gorneau said:

HI @Vineeth Achari,

 

The example provided at hugeinc.com is pretty straight forward. At a basic level, you'll want to either kill the default scroll behavior, or contain everything in a parent element that has a height/width of 100% and overflow hidden. Then, whenever the scroll delta meets a minimum threshold, you can fire off a GSAP tween to move (tween the `y` property) of the stacked elements (each of those are also width/height 100% inside the container), -/+ the height of the a panel element.

 

You'll want to detect if the user is at scrollTop 0 before allowing a tween +y to (reverse) ... and also determine if the scrollTop is at its limit (  panel height * (number of panels - 1 ) ) before allowing any advance (forward).

 

Hope this helps.

 

Shaun

Thanks Shaun.