1

Estoy desarrollando una web con scroll vertical y horizontal. Me gustaría desplazarme horizontalmente cuando bajo la rueda del mouse. Lo he logrado con ScrollMagic y GSAP (TimelineMax).

Pero cuando cambio el tamaño de la ventana (window.resize), necesito actualizar las variables que contienen la cantidad de píxeles que tengo que desplazar hacia la derecha o izquierda.

Cuando se carga la web, hago una serie de cálculos para saber cuántos píxeles tengo que desplazar hacia la derecha (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);
        });
    }
});

Ahora, cuando el tamaño de la ventana cambia, he hecho esto:

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

Actualizo la variable scene de ScrollMagic, pero también necesito actualizar la coordenada x de la variable horizontalSlide (TimelineMax.fromTo). Concretamente, esta línea de código:

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

Aquí tenéis el código funcionando en un Pen (enlace)

No tengo idea de cómo puedo lograrlo. He buscado en internet, pero no he encontrado nada :(

¿Alguien puede mostrarme el camino, por favor?

¡¡Gracias!!

1 respuesta 1

0

Finalmente, me han dado la solución en los foros de GreenSock.

Publico aquí el enlace por si alguien tiene un problema similar al mío en el futuro.

SOLUCIÓN: enlace a los foros de GreenSock

Básicamente lo que hay que hacer es destruir la escena y volverla a crear en el evento 'resize' e integrar el tween dentro de la escena.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.