[英]How to update values of fromVars/toVars of TimelineMax on window resize?
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).
我已经通过ScrollMagic和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): 加载窗口时,我进行了一系列计算,以了解必须向右滚动多少像素(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 我更新了场景,但是我需要从ToTo更新TimelineMax的x坐标
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!! 谢谢!!
Finally, I have been given the solution in the GreenSock forums. 最后,在GreenSock论坛中为我提供了解决方案。
I post the link here in case someone has a problem similar to mine in the future. 如果将来有人遇到类似于我的问题,我会在此处发布链接。
SOLUTION: link to the GreenSock forums 解决方案: 链接到GreenSock论坛
Basically what you have to do is destroy the scene and build it again with the tween 'inside'. 基本上,您要做的就是销毁场景,然后使用补间“内部”再次构建场景。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.