GSAP timelines behaviour based on mediaQueries

[Alexyn0o 3 Likes (Newbie)]

Hello, can anyone help me with this error? (I want to preface that I'm a newbie at coding and I only try to adapt from other as much as I can understand...)

 

I have adapted some code from the forum which explained how to use GSAP for different media queries but I cannot seem to make the functionality work...

 

The idea:

 

When page is fullscreen, the menu icon should trigger and animate GSAP timeline on >mouseenter/mouseleave< for selector ".menu-links". ( I used .play(); and .reverse(); )

 

When page is going devices size screens, mobile/tablet < 733px, the menu icon should trigger and animate GSAP timeline on >click< for selector ".menu-links + #social" ( I used .restart(); and .reverse(); )

 

---- the code works right now only when page is loaded in mobile size to begin with, if resized functionality breaks. also vice versa, desktop resized to mobile ----

 

My question is can: this be done better? Ideal would be to resize page without losing functionality going from big screens to small screens without page reload.

 

 

====

ps: if this topic is wrongfully opened please feel free to delete it.

 

Thank you very much,

Alex

See the Pen LYyVaRw by designismore (@designismore) on CodePen

[Alexyn0o 3 Likes (Newbie)]

This is the initial code before trying to add mediaqueries and extra selector.

 

 
$('nav > #menu').each(function(i, el) {
 	var tl = new gsap.timeline({
		paused: true
	}); 
	tl			 
		.from($(el).find('.menu-links'), { duration: 0.4, autoAlpha: 0	}, 'Sametime')
		.from($(el).find('.menu-links > li > a > span'), { duration:  0.4,	x: "-100%",	opacity: 0,	ease:'sine.inOut' }, .05, 'Sametime');
		
 
	 $(".icon-top").on("mouseenter", function() {
	  tl.play();
	});
	
	$(el).on("mouseleave", function() {
	  tl.reverse();
	});	
 
 
 });
 
 

ultimately i'm looking for it to change to

$('nav > #menu').each(function(i, el) {
 	var tl = new gsap.timeline({
		paused: true
	}); 
	tl			 
		.from($(el).find('.menu-links'), { duration: 0.4, autoAlpha: 0	}, 'Sametime')
		.from($(el).find('.menu-links > li > a > span'), { duration:  0.4,	x: "-100%",	opacity: 0,	ease:'sine.inOut' }, .05, 'Sametime')
		.from($(el).find('#social'), { duration: 0.4, autoAlpha: 0	}, 'Sametime');
		
 
		$(".icon-top").click( function() {
			tl.play();
		});
			
		$(document).on('click', function(event) {
			if (!$(event.target).closest('.icon-top').length) {
			tl.reverse();
			}
		});
 
});

but only on viewport resize
 

[GreenSock 18,240 Likes (Superhero)]

Currently, you're running all your logic EACH time the breakpoint hits and re-creating everything (not good). You need to write your code so that it would roll back the changes you made last time before you add the new logic/animations. For example the mouseenter/mouseleave listeners should be removed if the matchMedia doesn't match.

 

Good luck! Let us know if you have any GSAP-specific questions.  

[Alexyn0o 3 Likes (Newbie)]

Thanks for the tip Jack. Ok, I was assuming it's not really GSAP sort of problem. Anyway I appreciate your answer. Will further investigate the code and try to fix it based on your remark.

 

Best,

Alex

[OSUblake 18,474 Likes (Superhero)]

Here's a start. I don't time have to figure out your CSS or animation code.

 

See the Pen RwVabdE by GreenSock (@GreenSock) on CodePen

 

It looks like you are combining old GSAP syntax with the newer one. Like you don't do new gsap.timeline(), just gsap.timeline(), stagger is a property, and for percentage transforms, use xPercent: -100 instead of x: "-100%"

 

 

I would also recommend studying up on jQuery on and off. You can't do off with an inline function.

https://api.jquery.com/off/

 

 

 

 

 

 

[Alexyn0o 3 Likes (Newbie)]

@OSUblake you are a madman and a mastermind! Thank you so much for opening my eyes and showing me a clear path to solving this!

 

I've adjusted the code you provided and added/changed a few things.

 

1. used two timelines, one for mobile one for desktop.

2. used gsap.set to clearProps: true and .kill(); to destory previously created timeline every time the initDesktop/Mobile was triggered. 

 

Here is the working pen preview:

 

See the Pen MWmKMdG by designismore (@designismore) on CodePen

 

I appreciate all the help! Hope this helps out others having similar issues/needs.

 

Best,

Alex