[On window resize, update tween vars with new value]

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

[On window resize, update tween vars with new value]

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!!

 

 

[On window resize, update tween vars with new value]

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!

[On window resize, update tween vars with new value]

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!!

[On window resize, update tween vars with new value]

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