LexLusa

My issue has been resolved, but I wanted to post it here too, in case somebody needs this. Just add an offset to the onPin function, like this: onPin: function() { $('#heelwrapper').css('height','100%'); }, offset: -800 //negative amount of pixels when the animation should start

I'll try that! Thank you!

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() { $('#wrapper').css('height','100%'); }, onUnpin: function() { $('#wrapper').stop().animate({height: '900px'}, 10); } });