Trying to Learn Scrollorama

Question

I tried to learn scrollorama over the weekend, I have tried to learn and use a lot of jquery plugins in the past, never had problems with any. However this one is really confusing me a lot.

I have searched stackoverflow, and other websites about superscrollorama tutorials, however none of them specify the exact way to do it.

I have made a fiddle here for this purpose.

http://jsfiddle.net/4o46jdj7/1/

Here is what I am trying to do. The red div should pin, then the #text-1 should scroll up and fade out, after it fades out, the bottom text should scroll up and once completed, it should unpin and move on to the footer.

Here is the code I am using

var controller = jQuery.superscrollorama({
    triggerAtCenter: false,
    playoutAnimations: true
});

var pinAnimations = new TimelineLite();
pinAnimations
    .append(TweenMax.from(jQuery('#text-1'), .5, {css:{marginTop:'300px'}, ease: Quad.easeInOut}))
    .append(TweenMax.to(jQuery('#text-1'), .5, {css:{opacity: 1}}))
    .append(TweenMax.to(jQuery('#text-2'), .5, {css:{bottom:'30px'}}));

    controller.pin(jQuery('#member'), 600, {
        anim:pinAnimations
    });