[Superscrolloroma offset, animations start when section enters viewport]

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

[Superscrolloroma offset, animations start when section enters viewport]

I'll try that!

 

Thank you!

[Superscrolloroma offset, animations start when section enters viewport]

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);

                }

            });