Use ScrollMagic to detect scroll direction

Question

I'd like to hide my site header when the users scrolls down the page (simple to do in ScrollMagic) - but I'm not sure about is whether I can also use ScrollMagic to detect if the user is scrolling up, and if so to show the header again.

The ricky part is that for the initial scrolldown I can set a simple offset for the main site wrapper, but for the scollup that can happen at any point during the page scroll I'm not sure how I can us ScrollMagic's events to achieve this?

Any help appreciated.

Dan

Now you could use GSAP's official scroll plugin, [ScrollTrigger](https://greensock.com/scrolltrigger), instead which has events related to each direction. — Zach Saucier, Jun 19 '20 at 13:40

score 6 · Answer 1 · edited Jan 26 '18 at 17:44

6

if you use ScrollMagic you can check for the event scrollDirection.

scene.on('enter',function(event){
     console.log(event.scrollDirection);
});

This will return "REVERSE" or "FORWARD", and based on that you can trigger something.

-cheers.

edited Jan 26 '18 at 17:44

mheavers

29,530
58
194
315

answered Nov 15 '16 at 20:25

Frederick Jaime

169
2
6

score 5 · Answer 2 · answered Dec 05 '15 at 02:11

You can use .on("update", function() { … }in your scene.

Here's something I just did for a new page. The tweened '#header' is inside another DIV that has position: fixed, is twice as high as '#header' and top: -80px;, so headeris moved 80px up or down (i.e. in and out of the visible area), depending on the scroll direction:

var controller = new ScrollMagic.Controller();

var i1 = 0; 
var i2 = 0; 

var scene = new ScrollMagic.Scene()
.addTo(controller)
.on("update", function() {
    var x1 = controller.info("scrollDirection");
    var x2 = $(window).scrollTop();
    var x3 = 400;
        if ( x1 == "REVERSE" && x2 >= x3 && i1 == 0) {
            TweenLite.fromTo("#header", 0.3, {top: "0px"}, {top: "80px", ease: Linear.easeNone});
            i1++;
            i2 = 0;
        }
        if ( x1 == "FORWARD" && x2 > x3 && i2 == 0) {
            TweenLite.fromTo("#header", 0.3, {position: "absolute", top: "80px"}, {top: "0px", ease: Linear.easeNone});
            i1 = 0;
            i2++;
        }       
});

i1 and i2are used to filter redundant events to avoid multiple tweens in the same direction.

x3 defines how long the header remains visible at the top of the page.

score -4 · Answer 3 · answered Nov 27 '15 at 15:26

-4

Do not use scrollmagic for this simple effect. You can try headroomjs.

answered Nov 27 '15 at 15:26

Nic

31
6

Use ScrollMagic to detect scroll direction

3 Answers3