Jump to content
GreenSock

hormigaz22

On window resize, update tween vars with new value

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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: 

See the Pen ZEzJGVd by hormigaz22 (@hormigaz22) on 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!!

 

 

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

 

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

 

 

  • Like 4
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×