Superscrollorama + diseño responsivo = no fluye correctamente - jquery, css, responsive-design

Usando Superscrollorama para animar en flechas en este sitio en particular: http://itsuptous.org/new_site

Es un diseño responsivo también. 960+, 768, 480 y 320. Uso de consultas de medios para activar los diferentes diseños. Si carga el sitio en cualquier tamaño del navegador, las flechas se animan correctamente, es cuando amplío o minimizo la ventana que se mueve a la posición incorrecta. No estoy seguro de lo que está pasando aquí. ¿Alguien tiene alguna idea?

Tengo los elementos absolutamente posicionados para evitar las barras de desplazamiento horizontal.

Código de jQuery Superscrollorama a seguir:

    jQuery(document).ready(function() {
//ACTIVATE BUTTON FOR SMOOTH SCROLLING
jQuery("#scroll_button").scrollTo("#section_two_outer");

//MOVE ARROWS ON SCROLL
var controller = jQuery.superscrollorama();
//INDIVIDUAL ELEMENT TWEEN
controller.addTween(".apply_now_arrow_left", TweenMax.from(jQuery(".apply_now_arrow_left"), .5, {css:{left:"-2500px"}}));
controller.addTween(".apply_now_button", TweenMax.from(jQuery(".apply_now_button"), .5, {css:{opacity: 0}}));
controller.addTween(".apply_now_arrow_right", TweenMax.from(jQuery(".apply_now_arrow_right"), .5, {css:{left:"5000px"}}));

Respuestas

Dave,

En realidad, no me parece que su sitiotiene un problema con Superscrollerama, parece que el problema que estás viendo se debe al cambio en el CSS en línea que tiene en el elemento de tu página. Por ejemplo, cuando se activa la animación, es simplemente animar el CSS "a la izquierda" "atributo a lo largo del tiempo, pero una vez hecho esto, el atributo izquierdo permanece en el elemento que rompe su diseño a medida que la ventana cambia de tamaño.

Para solucionar esto, sugiero simplemente usar un jQuerydevolución de llamada después de que se complete la animación para eliminar el CSS en línea de las flechas, lo que permite que su hoja de estilo gobierne posteriormente su posición al cambiar el tamaño de la ventana. El peor escenario para esto sería entonces hacer un parpadeo casi imperceptible si la animación ocurriera mientras el tamaño de la ventana gráfica estaba cambiando (lo cual no estoy seguro de cómo lograrlo), por lo que creo que estaría listo.

// Demo code from http://johnpolacek.github.com/superscrollorama/
controller.addTween("#fade",
TweenMax.from($("#fade"),.5,{
css:{opacity:0},
onComplete: function(){alert("test")}
}));

Entonces, probablemente querrías hacer algo como esto:

jQuery(document).ready(function() {
//ACTIVATE BUTTON FOR SMOOTH SCROLLING
jQuery("#scroll_button").scrollTo("#section_two_outer");

//MOVE ARROWS ON SCROLL
var controller = jQuery.superscrollorama();
//INDIVIDUAL ELEMENT TWEEN
controller.addTween(".apply_now_arrow_left", TweenMax.from(jQuery(".apply_now_arrow_left"), .5, {css:{left:"-2500px"}, onComplete:function(){jQuery(".apply_now_arrow_left").css("left","auto")}}));
controller.addTween(".apply_now_button", TweenMax.from(jQuery(".apply_now_button"), .5, {css:{opacity: 0}}));
controller.addTween(".apply_now_arrow_right", TweenMax.from(jQuery(".apply_now_arrow_right"), .5, {css:{left:"5000px"}, onComplete:function(){jQuery(".apply_now_arrow_right").css("left","auto")}}));

Por supuesto, YMMV depende de cómo funciona su hoja de estilo, por lo que podría hacer algo diferente, pero ese es el enfoque general básico.