时间戳

首页 > 解决方案 > 如何在窗口调整大小时更新 TimelineMax 的 fromVars/toVars 的值？

jquery - 如何在窗口调整大小时更新 TimelineMax 的 fromVars/toVars 的值？

问题描述

我正在开发一个带有垂直和水平滚动的网站。当我向下滚动鼠标滚轮时，我想水平滚动。我已经通过 ScrollMagic 和 GSAP (TimelineMax) 实现了这一点。但是当我调整窗口大小时，我需要更新变量，其中包含我必须向右滚动的像素数。

当窗口加载时，我进行了一系列计算以知道我必须向右滚动多少像素（var amount_to_scroll）：

function calculateCarruselDimensions() {
    var total_width = 0;
    var total_global_width = 0;
    var amount_to_scroll = 0;

    $('.carrusel').find('.carrusel_item').each(function() {
        _this = $(this);
        _this.css('width', _this.find('img').width() + 'px');
        console.log(_this.find('img').width());
        total_width += _this.find('img').width();
        //console.log( _this.attr('id') + '=' + total_width );
    });

    total_global_width = total_width;
    $('.carrusel').find('.panel').css('width', total_global_width + 'px');
    amount_to_scroll = total_global_width - $(window).width();

    return amount_to_scroll;
}

$(window).on("load", function() {
    if ($('.carrusel').length) {
        var controller = new ScrollMagic.Controller();
        var horizontalSlide = new TimelineMax();

        $('.carrusel').imagesLoaded(function() {

            amount_to_scroll = calculateCarruselDimensions();
            console.log(amount_to_scroll);

            horizontalSlide.fromTo("#slideContainer", 10,
            {
                x: "0"
            }, {
                x: amount_to_scroll * (-1) + 'px',
                ease: Linear.easeNone,
            });

            scene = new ScrollMagic.Scene({
                triggerElement: "#slideWrapper",
                triggerHook: "onLeave",
                duration: amount_to_scroll + 'px' }).
            setPin("#slideWrapper").
            setTween(horizontalSlide).
            addTo(controller);
        });
    }
});

现在，当我调整窗口大小时，我已经这样做了：

$(window).bind("resize", function() {
    amount_to_scroll = calculateCarruselDimensions();
    //console.log(amount_to_scroll);
    scene.duration(amount_to_scroll + 'px');
});

这是您可以看到代码的笔（链接）

我更新了场景，但我需要更新 TimelineMax fromTo 的 x 坐标

x: amount_to_scroll * (-1) + 'px',

我不知道我怎么能做到这一点。我已经搜索了互联网，没有找到:(

谁能给我指路好吗？？

谢谢！！

标签： jqueryresizescrollmagicgsap

解决方案

最后，我在 GreenSock 论坛中得到了解决方案。

我在这里发布链接，以防将来有人遇到与我类似的问题。

解决方案：链接到 GreenSock 论坛

基本上你要做的就是破坏场景并使用补间“内部”再次构建它。

推荐阅读