[Draggable scroll: How to get current scroll position?]

Hello,

 

I am trying to build a UI where two arrows – up and down – control the scroll position.

The scroll element is a Draggable.

var scroller = $('.scroller.draggable');

Draggable.create(scroller, {
        type:"scrollTop",
        edgeResistance:0.75,
        throwProps:true,
        onDragStart: function() {
            Draggable.get(menu).disable();
        },
        onDragEnd: function() {
            Draggable.get(menu).enable();
        }
    });

$('.icon-arrow-down').on('click', function(event){
        TweenLite.to(scroller, 1, {scrollTo:{y:$scope.yStart}, ease:Power2.easeOut, onComplete:updateYScroll});
        function updateYScroll() {
            console.log(this.scrollY);
            //$scope.yStart = scroller.scrollY + $scope.yIncrement;
        }
    });

But when calling scrollY I always get undefined...

 

Greetings,

luneyard

[Make iOS like drag menu]

Wow, that's great! Thank you so much!

[Make iOS like drag menu]

Hello,

 

is it possible to make a ios like drag menu, where I can "throw" the menu open?

Maybe with throwProps plugin or so... I don't know, I am new to GSAP

 

I mean something like you can see here:

https://www.youtube.com/watch?v=hbuL-vUDBhg&feature=youtu.be&t=32s

 

What I mean happens at 32s

 

I've already tried it out as you can see in the codepen example.

 

Greetings,

luneyard

See the Pen myaREa by luneyeir (@luneyeir) on CodePen