How to update values of fromVars/toVars of TimelineMax on window resize?

Question

I'm developing a website with vertical and horizontal scroll. I would like to scroll horizontally when I wheel down the mouse wheel. I've achieved that with ScrollMagic and GSAP (TimelineMax). But when I resize the window, I need to update the variables thant contains the number of pixels I have to scroll to the right.

When window loads, I make a series of calculations to know how many pixels I have to scroll to the right (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);
        });
    }
});

Now, when I resize the window, I've done this:

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

Here is the pen where you can see the code (link)

I update the scene, but I need to update x coordinate of TimelineMax fromTo

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

I have no clue how I can achieve that. I've searched the internet, nothing found :(

Can anyone show me the way, please??

Thanks!!

Answer 1

Finally, I have been given the solution in the GreenSock forums.

I post the link here in case someone has a problem similar to mine in the future.

SOLUTION: link to the GreenSock forums

Basically what you have to do is destroy the scene and build it again with the tween 'inside'.