2

当我固定网站的一部分时，我在使用 Superscrollorama 插件时遇到了一点困难，并且在固定时运行动画后，我想为某些元素设置动画，直到下一个固定的内容到位......

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

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

如您所见，每个“部分”都有相同的元素，都围绕着一个瓶子。我的 JS 代码将固定一个部分，移动 .elem# div，然后取消固定并让下一部分发生.. 在 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，但这不是所需的行为）

我错过了什么？有没有办法将此动画推送到引脚之间的堆栈中？

提前致谢！

4

0 回答 0