On window resize, update tween vars with new value

[hormigaz22]

Hi! Newbie here... Sorry 

I'm developing some horizontal scroll with TimelineMax and ScrollMagic... When page loads first time, that's all going good, but when I resize window or change from landscape to portrait in mobile devices, scroll stops working properly.

I do not how to access the previously created TimelineMax.fromTo when I am on $(window).on('resize') event... I've looked around, internet, forums, ... and I didn't find the solution.

 

I've attactched Codepen URL where you can see what I've done so far... Please, load URL see initial scroll behaviour, and then resize vertically and horizontally and you will see how the scroll is not showing all images or shows a blank space to the right of the last image.

 

Anyone can show me the way, please? Thanks in advance!

 

See the Pen ZEzJGVd by hormigaz22 (@hormigaz22) on CodePen

[ZachSaucier]

Hello hormigaz and welcome to the forum.

 

1 hour ago, hormigaz22 said:

Please, load URL see initial scroll behaviour, and then resize vertically and horizontally and you will see how the scroll is not showing all images or shows a blank space to the right of the last image.

I don't know how to use ScrollMagic, but I was just going to note that resizing horizontally it still works. Resizing vertically breaks the functionality as you describe.

[hormigaz22]

On 8/30/2019 at 2:58 PM, ZachSaucier said:

Hello hormigaz and welcome to the forum.

 

I don't know how to use ScrollMagic, but I was just going to note that resizing horizontally it still works. Resizing vertically breaks the functionality as you describe.

Hello ZachSaucier!

 

The thing about using ScrollMagic and GSAP is to achieve the scroll effect that you see when you scroll down... even scrolling down, there is a moment when you are scrolling left/right but doing it while are scrolling/touching up/down... Have I explained myself well?

 

Yes, resizing breaks functionality, do you know how to update value of variables when resizing? Thanks!!

[ZachSaucier]

On 9/2/2019 at 3:01 AM, hormigaz22 said:

do you know how to update value of variables when resizing?

I would not recommend updating any existing tweens or timelines when the user changes their viewport size. Instead I would recommend killing those animations and starting new ones when a breakpoint is reached. Changing variables mid-animation would be more expensive to implement and I would guess more messy as well, though it is possible

[hormigaz22]

On 9/3/2019 at 1:45 PM, ZachSaucier said:

Instead I would recommend killing those animations and starting new ones when a breakpoint is reached.

ZachSaucier, I've tried to kill the animation and start it again, but that didn't worked to me.

 

I have declared in the global scope the variable named 'horizontalSlide' like that:

var horizontalSlide = new TimelineMax();

Then when page is loaded:

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

And then, when page resizes:

horizontalSlide.kill();
//TimelineMax.killTweensOf("#slideContainer");

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

That code does not work

 

Please, can you help me? How can I kill and start over the animation when window is resized?

 

THANKS!

[ZachSaucier]

This is really hard to debug without seeing a demo of your GSAP code for context. It's hard to know when you're killing your timeline. Maybe it is not in the right place?

 

Can you please provide another minimal demo of your setup?

[hormigaz22]

18 hours ago, ZachSaucier said:

Can you please provide another minimal demo of your setup?

Hi Zach! Here is the demo reduced to the minimum configuration that I have been able to do: CodePen

JS code explanation:

• function calculateCarruselDimensions() --> Function that loops through each .carrusel_item to get its width and know how many pixels should I scroll to the right/left to pass to the tween.
• function doneResizing() --> Function that rerun the calculations of getting each .carrusel_item width. That function only is triggered when window resize is finished.
• var horizontalSlide --> variable that contains TimelineMax
• var controller --> variable that contains ScrollMagic Controller

18 hours ago, ZachSaucier said:

Maybe it is not in the right place?

I've posted the same question on StackOverflow, but no one have answered.  I'm all alone in this world!! ?

I hope you can help me. If not, don't worry

Thanks a lot!!

 

 

[mikel]

Hey @hormigaz22,

 

ScrollMagic is not a GreenSock product nor is it officially supported here.

 

Here's a solution - a fork of a @PointC ´s pen - for flexible widths:

 

See the Pen VwZyxwb by mikeK (@mikeK) on CodePen

 

But for fixed widths, I have not found a way.
The docs and the forum of scrollMagic are similar to 'SM'.

 

Good luck ...

Mikel

[mikel]

 

Heureka ...

 

After some cups of coffee. Just do it brutally - destroy and build again with the tween 'inside':

 

See the Pen JjPMvKb by mikeK (@mikeK) on CodePen

 

Happy weekend!

Mikel

 

 

[OSUblake]

4 hours ago, mikel said:

Just do it brutally - destroy and build again with the tween 'inside':

 

Yes! Rebuilding is almost always the easiest solution.

[hormigaz22]

On 9/6/2019 at 1:19 PM, mikel said:

Heureka ...

 

After some cups of coffee. Just do it brutally - destroy and build again with the tween 'inside':

 

Happy weekend!

Mikel

@mikel!! I've tested it on my environment and works perfectly!! Thank you very much!

From now on... destroy! destroy! destroy!!!

Thanks again