Pause animation when windows resized below 990 and start animation from where it paused

[dhavalvyas]

Hello all,

 

This is my first post in this forum. I have recently started using Greensock in my projects and it's the best javascript plugin out there on internet. So thank you so much for making this and helping people like me.

 

Here is the codepen url: 

 

This example uses Scrollmagic and Tweenmax timeline. 

 

My question is, when I resize the window below 990px, animation should stop immediately and it should show fixed layout below 990px. So when I resize window below 990px, all the boxes should stay touched at the bottom left corner and won't do any animation. But when browser window is below 990px and i am in the middle of the page and I resize the window to more than 990px, animation should start from the right point. 

 

I am not sure if this is good enough to explain the problem. So let me know if you require more information on the issue.

 

I have used this kind of animation in two different projects and I am not able to find any answer to this. So please help.

 

Thanks,

Dhaval

See the Pen GrBraM by cooldhavs (@cooldhavs) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

I'm having trouble understanding the question. I looked at your demo but I didn't see any animation and I don't know what you mean by "all boxes should stay touched at the bottom". What is a box?

 

Do you have a static image that shows this layout or something.

 

This sounds like it could be a bit complicated, especially with ScrollMagic involved. If there is anyway you can simplify the demo and explanation so that we can focus on the GSAP part that would be best.

 

A general answer for your question would be to:

 

• pause() the timeline and record the progress() in a variable somewhere when the window shrinks
• when the window gets bigger call a function that rebuilds the timeline and sets the progress() to the recorded value.

[dhavalvyas]

Hey Carl,

 

Thanks for the response. So animation works when you scroll down. So basically when you scroll down it kind of creates parallax effect.

 

- Boxes are white content area which is overlapping on the image.

 

Here I have attached two screenshots of the demo so I can explain better.

1) For screens above 990px

2) For mobile devices

 

Things I want to achieve here.

- Animation works above 990px screen with screenshot 1

- Animation stops and changes to layout showed in screenshot 2

 

So basically, when user opens the website in desktops it shows screenshot 1 with animation (parallax) but when user shrinks the screen down below 990px it stops the animation and changes the layout to screenshot 2. But when they resize the window again above 990px from whatever point of the screen, animation starts based on user's location on the page. So lets say user shrink the browser below 990px and  scrolls the website little bit and then resize the browser above 990px, animation should start based on the user's location at that time.

 

I am not sure if this makes sense or not. But I hope this would help to understand.

 

I will try to work with your general answer that you posted and will keep you updated about that. But in the mean time if you can help me with anything above that would be great.

 

Thanks again,

Dhaval

[dhavalvyas]

Hello Carl,

 

I have also updated the codepen with media query so below 990px it will show the different layout.

 

Thanks,

Dhaval

[dhavalvyas]

Hello Carl,

 

I have found the solution for this issue. I haven't tried it on my projects but I tried it with codepen and it worked. So I am just posting the answer here in case someone like me lands here for the solution.

 

Pause and Play animation based on borwser width (ScrollMagic and GSAP Animation)

 

Tip: Define controller and all your scenes outside your window resize function. Only enable or disable controller based on the resize query.

 

Here is the example code. (Taken from here. https://github.com/janpaepke/ScrollMagic/issues/117)

$(window).on("resize", function(e) {
  if ($(window).width() < 769 && controller.enabled()) {
    controller.enabled(false);
  } else if (!controller.enabled()) {
    controller.enabled(true);
  }
  controller.update(true);
});

This has nothing to do with GSAP animation. They work perfectly fine.

 

Thanks again for your help Carl,

Dhaval

[Carl]

Awesome. Thanks for letting us know you found a possible solution. 

Its been a busy day and I didn't have time to dig into this.