I'm trying to create an offset to my animations, so they start before th pin frame is at the top, even start the animation as soon the new section enters the viewport.

I already tried to put the offset at the end of the appended animations but that doesn't work...

Any ideas?

```
var controller = $.superscrollorama({
        triggerAtCenter: true
    });
        // set duration, in pixels scrolled, for pinned element
            var pinDur = 6500;

            // create animation timeline for pinned element
            var pinAnimations = new TimelineLite();
            pinAnimations
                .append([
                    TweenMax.to($('#logo'), .5, {css:{left:'34%'}}),
                    TweenMax.to($('#left, #left2'), .5, {css:{top:'-1055px'}}),
                    TweenMax.to($('#right, #right2'), .5, {css:{top:'-1327px'}})                        
                    ])
                .append([
                    TweenMax.to($('#flash'), .01, {css:{display: 'none'}})
                    ])
                .append([
                    TweenMax.to($('#flash'), .02, {css:{display: 'block'}}),
                    TweenMax.to($('#logo, #left, #right'), .01, {css:{display:'none'}}),
                    TweenMax.to($('#flash, #frame, #stand, #wrapper'), .02, {css:{backgroundColor:'white'}}),
                    TweenMax.to($('#flash'), .02, {css:{display:'none'}})
                    ])
                .append(TweenMax.to($('#this_pin-frame-unpin'), .5, {css:{top:'100px'}}));

            // pin element, use onPin and onUnpin to adjust the height of the element
            controller.pin($('#wrapper'), pinDur, {
                anim:pinAnimations, 
                onPin: function() {
                    $('#heelwrapper').css('height','100%');
                }, 
                onUnpin: function() {
                    $('#wrapper').stop().animate({height: '900px'}, 10);
                }
            });

```