[Play One Step of Timeline on Mouse Scroll]

Hey,

 

I am desperately searching for a way to play one step of my timeline when the a mouse scroll gets started. All methods that I have found trigger the events multiple times on scroll and gsap gets really confused.

Is there a convient way to build something like that with greensock?

 

What I want to build is a animation triggered webapp like these:

https://theshift.tokyo/

http://www.contiducco.it/index.php?route=common/home

 

My Code at the moment:

 

$(window).bind("mousewheel DOMMouseScroll", function(event) {
      var docTimeline = new TimelineLite({ paused: true });
      docTimeline.add(TweenLite.to(".lightLogo", 1, { y: "200%" }));
      docTimeline.add(TweenLite.to(".text", 1, { x: "0%" }));
      // Events when scrolled down.
      if (
        event.originalEvent.wheelDelta < 0 ||
        event.originalEvent.detail > 0
      ) {
        docTimeline.play();
      } else {
        docTimeline.reverse();
      }
    });