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

Hello Carl, I have also updated the codepen with media query so below 990px it will show the different layout. Thanks, Dhaval

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

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: http://codepen.io/cooldhavs/pen/GrBraM 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