Jump to content
Search Community

addPause() isn't working in mobile

eyeseesun test
Moderator Tag

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

Hey there!

 

First thing, dope library. I just started learning it not too long ago and it's so much fun, really sky-rocketed my front end development.

Now the problem that I'm having is that I'm trying to make a mobile first responsive site for a friend of mine, but my menu animation is not working when the screen resolution is below the media query requirement.

This is my typescript code of the animation.

 

let width = $(window).width();

		if(width > 600){
			this.menuAnimation
				.to(menuArea, .35, {right: '0px'}, 'open')
				.addPause()
				.to(menuArea, .35, {right: '-300px'}, 'close')
				.call(()=>{
					this.menuAnimation.restart();
					this.menuAnimation.pause();
				});
		} else if(width < 600){
			this.menuAnimation
				.to(menuArea, 0, {right: '0vw'}, 'open')
				.addPause()
				.call(()=>{
					console.log('open');
				})
				.to(menuArea, 0, { right: '-100vw'})
				.addPause()
				.call(()=>{
					console.log('close');
					this.menuAnimation.restart();
					this.menuAnimation.pause();
				});
		}

 

This is the site so far full screen with the open and closed menu (the width > 600 animation).

 

image.png.998bbc9b3fbd0bdb95fa70d2b690f525.png

 

Then you click the x and it finishes the animation after the first pause.

 

image.png.de86f3cb525509ad4f89b83e082340f7.png

 

But this is what's happening on mobile when I click the hamburger menu.

 

image.png.9e95d144e2ee64b3c8c98345c4509bb6.png

 

If it's hard to see, the 'open' 'close' console logs show up when you click the hamburger menu. It plays the whole animation without the pauses. And beyond that, when I click the menu again, the animation doesn't fire, unlike when it's full screen.

Can anybody point me in a direction?

 

-Regards

Link to comment
Share on other sites

First of all, welcome to the forums and thanks for the kind words!

 

It's super difficult to troubleshoot blind, so it'd be awesome if you could provide a reduced test case in codepen (or even a link to a real site if that's all you can do). I wonder:

  1. What version of GSAP are you using? 
  2. Where are you declaring this.menuAnimation? 
  3. Why are you using addPause() like that in the timelines? 

I wonder if you're running into a problem with zero-duration tweens having immediateRender:true by default. Have you tried either using set() instead of to() for those, or set immediateRender:false?

 

For more info about immediateRender, see https://greensock.com/immediateRender

 

Happy tweening!

  • Like 2
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.
×
×
  • Create New...