Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Alexyn0o

GSAP timelines behaviour based on mediaQueries

Recommended Posts

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

Link to comment
Share on other sites

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
 

Link to comment
Share on other sites

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.  

  • Thanks 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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/

 

 

 

 

 

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@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

 

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.
×