Смещение суперскроллоромы, анимация должна начинаться при входе секций в область просмотра

Question

Я пытаюсь создать смещение для своих анимаций, чтобы они начинались до того, как кадр булавки окажется вверху, даже запускаем анимацию, как только новый раздел входит в область просмотра.

Я уже пытался поместить смещение в конце добавленной анимации, но это не работает...

Есть идеи?

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

Answer 1

Хорошо, вы можете заархивировать это, добавив смещение к функции 'onPin':

onPin: function() {
     $('#heelwrapper').css('height','100%');
},
offset: 800 //negative amount of pixels when the animation should start

Answer 2

Я вижу, что вы включили triggerAtCenter: true в вашем контроллере. Какая там конкретная причина того, что triggerAtCenter: false не соответствует вашим потребностям?

triggerAtCenter: анимация срабатывает, когда источник соответствующего элемента находится в центре прокрутки (true). Это может быть изменено здесь, чтобы быть на верхнем / левом краю (false) - по умолчанию: true

Проблема с другим ответом состоит в том, что высота пикселя смещения вашего окна просмотра может измениться, если ваш контент динамический, например, если у вас есть адаптивный веб-сайт.