unPin后的Superscrollorama动画

Question

当我固定我的网站的一部分时，我对Superscrollorama插件有点困难，并且在动画运行时固定，我想要动画某些元素，直到下一个固定内容到位... < / p>

说我有这个部分的元素..

        <div id="prod_list">
        <div class="seccion amar prod1">
            <div class="prod_list_wrapper">
                <div class="elem1">1</div>
                <div class="botella"><img src="img/bott_fnd_granreserva.png" alt="Gran Juvé y Camps"></div>
                <div class="elem2">2</div>
                <div class="elem3">3</div>
            </div>
        </div>
        <div class="seccion rojo prod2">
            <div class="prod_list_wrapper">
                <div class="elem1">1</div>
                <div class="botella"><img src="img/bott_fnd_blancdenoirs.png" alt="Blanc de Noirs"></div>
                <div class="elem2">2</div>
                <div class="elem3">3</div>
            </div>
        </div>
        <div class="seccion amar prod3">
            <div class="prod_list_wrapper">
                <div class="elem1">1</div>
                <div class="botella"><img src="img/bott_fnd_milesime.png" alt="Milesime"></div>
                <div class="elem2">2</div>
                <div class="elem3">3</div>
            </div>
        </div>

如您所见，每个'seccion'都有相同的元素，都在瓶子周围。 我的JS代码将固定一个部分，移动.elem＃divs，然后取消固定并让下一部分发生..在onUnpin和onPin之间，我想要做一些滚动动画的元素淡出向上......

        var controller = $.superscrollorama();
        var pinDur = 1500;

        controller.pin( $('.prod1'), pinDur, {
            anim: (new TimelineLite())
                .append([
                    TweenMax.fromTo( $('.prod1 .elem1'), 1, 
                        {css:{top: 750, left:-100, opacity:0}, immediateRender:true}, 
                        {css:{top: 550, left:-100, opacity:1}, ease:Quad.easeOut}),
                    TweenMax.fromTo( $('.prod1 .botella'), 1, 
                        {css:{top: 300, left:30, opacity:1}, immediateRender:true}, 
                        {css:{top: 0, left:30, opacity:1}, ease:Quad.easeOut}),
                    TweenMax.fromTo( $('.prod1 .elem2'), 1, 
                        {css:{top: 250, left:100, opacity:0}, immediateRender:true}, 
                        {css:{top: 200, left:100, opacity:1}, ease:Quad.easeOut}),
                    TweenMax.fromTo( $('.prod1 .elem3'), 1, 
                        {css:{top: 650, left:400, opacity:0}, immediateRender:true}, 
                        {css:{top: 500, left:400, opacity:1}, ease:Quad.easeOut})
                ]),
            onPin: function() { console.log('Pin prod1'); },
            onUnpin: function() {  console.log('unPin prod1'); }
            });

        controller.addTween( $('.prod1'),
            (new TimelineLite())
                .append([
                    TweenMax.fromTo( $('.prod1 .elem1'), .25, 
                        {css:{top:550}},
                        {css:{top:350, opacity:0}, ease:Quad.easeOut, onUpdate:function(){
                            console.log("!! " + $('.prod1 .elem1').css('top'));
                        }
                    }),
                    TweenMax.fromTo( $('.prod1 .elem2'), .25,
                        {css:{top:200}},
                        {css:{top:100}, ease:Quad.easeOut}
                        ),
                    TweenMax.fromTo( $('.prod1 .elem3'), .25,
                        {css:{top:500}},
                        {css:{top:400}, ease:Quad.easeOut}
                        )

                ]), 500, 0 );

        controller.pin( $('.prod2'), pinDur, {
            anim: (new TimelineLite())
                .append([
                    TweenMax.fromTo( $('.prod2 .elem1'), 1, 
                        {css:{top: 750, left:-100, opacity:0}, immediateRender:true}, 
                        {css:{top: 550, left:-100, opacity:1}, ease:Quad.easeOut}),
                    TweenMax.fromTo( $('.prod2 .botella'), 1, 
                        {css:{top: 300, left:30, opacity:1}, immediateRender:true}, 
                        {css:{top: 0, left:30, opacity:1}, ease:Quad.easeOut}),
                    TweenMax.fromTo( $('.prod2 .elem2'), 1, 
                        {css:{top: 250, left:100, opacity:0}, immediateRender:true}, 
                        {css:{top: 200, left:100, opacity:1}, ease:Quad.easeOut}),
                    TweenMax.fromTo( $('.prod2 .elem3'), 1, 
                        {css:{top: 650, left:400, opacity:0}, immediateRender:true}, 
                        {css:{top: 500, left:400, opacity:1}, ease:Quad.easeOut})
                ]),
            onPin: function() { console.log('Pin prod2'); },
            onUnpin: function() {  console.log('unPin prod2'); }
            });

但是我无法使这个addTween动画在onUnpin函数关闭时准确触发，并且使滚动变得明智（我可以从onUnpin函数中触发动画，ofc，但这不是所需的行为）

我错过了什么？有没有办法将这些动画推入引脚之间的堆栈？

提前致谢！