Testing Conditions syntax for gsap.matchMedia()

[kweso]

Hey,

I am using 

let mm = gsap.matchMedia();
		mm.add(
			{
				portrait: "(max-aspect-ratio: 7/3)",
				landscape: "(max-aspect-ratio: 2)"
			}, (context) => {
				let {portrait, landscape} = context.conditions;

				let tl = gsap.timeline({repeat: -1, repeatDelay: 7});
				tl.from("#banner", {opacity:0, ease: "power2.out", duration: 0.4, delay:0.5});
				tl.from("#guy", {yPercent:-100, ease: "bounce", duration: 0.6, delay:0.5});
				tl.from("#textOne", {
					yPercent: portrait ? 0 : -100,
					xPercent: portrait ? -100 : 0,
					ease: "power2.out", duration: 0.4});
				tl.to("#textOne", {
					yPercent: portrait ? 0 : 100,
					xPercent: portrait ? 100 : 0,
					ease: "power2.in", duration: 0.4, delay: 2});
				tl.from("#textTwo", {
					yPercent: portrait ? 0 : -100,
					xPercent: portrait ? -100 : 0,
					ease: "power2.out", duration: 0.4});
				tl.to("#textTwo", {
					yPercent: portrait ? 0 : 100,
					xPercent: portrait ? 100 : 0,
					ease: "power2.in", duration: 0.4, delay: 2});
				tl.from("#packShotBG", {
					scaleX: landscape ? 100 : 0,
					scaleY: landscape ? 0 : 100,
					ease: "power4.out", duration: 0.4, delay: 1});
				tl.from("#packShotBG2", {
					scaleX: landscape ? 100 : 0,
					scaleY: landscape ? 0 : 100,
					ease: "power4.out", duration: 0.4, delay: -0.2});
				tl.from("#claim", {opacity:0, ease: "power4.out", duration: 0.4, delay: -0.2});
				tl.from("#mainLogo", {opacity:0, ease: "power4.out", duration: 0.4, delay: -0.2});
				tl.from("#subLogo", {opacity:0, ease: "power4.out", duration: 0.4, delay: -0.2});
			}
		)

to make my animation horizontally or vertically depending on the aspect ratio of the screen.

Now I wanted to test different scenarios on tried

mm.add(
			{
				portrait: false,
				landscape: true
			}, (context) => {
				let {portrait, landscape} = context.conditions;
...

to force a certain behaviour. But I now get a syntax error.

Is there any way to set forced conditions without changing too much of my code?

TYVM

kws

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[kweso]

Ok, I´ll try to create an abstact version of my project.

I just thought, since this works:

 

mm.add(
			{
				portrait: "(max-aspect-ratio: 7/3)",
				landscape: "(max-aspect-ratio: 2)"
			}, (context) => {
				let {portrait, landscape} = context.conditions;

and this doesn't:

 

mm.add(
			{
				portrait: false,
				landscape: false
			}, (context) => {
				let {portrait, landscape} = context.conditions;

maybe someone could point me to the right syntax.

But if this is in fact the right syntax, then there is a mistake somewhere else. Will provide more context...

Thx,

kws

[kweso]

What I actually wanted was:

{
				portrait: "@container mainBanner (max-aspect-ratio: 7/3)",
				landscape: "@container mainBanner (max-aspect-ratio: 2)"
			}

But that is not supported, apparently...

So I tried to set my conditions to "false" manually:

See the Pen qBvexyp by ul-rick (@ul-rick) on CodePen

[Rodrigo]

Hi,

 

I think the issue here are the values you're passing as aspect ratios, they don't seem very realistic TBH. A 7:3 ratio is 2.33 (periodic 3), which means the width of the screen is at least 2.3 times it's height. Normally screens have a  16:9 ratio (1.77 periodic 7) while tablets have a 4:3 ratio (1.33 periodic 3).

 

Here is a demo using more realistic ratios:

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

 

Hopefully this helps.

Happy Tweening!

[kweso]

Dear Rodrigo,

thank you for your ideas.

But this is not a website/webapp. This is a advertisment banner. My client will put the animation in different website layouts. Everything between 300x600px and 800x250px.  They used to do this with "iframe". And for that, max-aspectratio/min-aspect-ratio worked just fine. And those ratios (7/3) were taylored exactly to my layout. 

 

My problem is, that the client changed their ad-banner-system. So I already had to change all "vh" and "vw" units in my css to "cqh" and "cqw". Obviously, beause the new system sees the banner container as view height and view width. Now those values are the actual website window size.

 

Therefore, I need to make the animation dependent of the container (<div id="bannerMain">) rather than the view size.

Either with something like this: 

portrait: "@container mainBanner (max-aspect-ratio: 7/3)"

Or read the div size any other way and feed that into the tween logic.

I'll try another idea tomorrow.

But I'll still apprechiate any hints!

Thanks again,

kws

[Rodrigo]

Hi,

 

As far as I know the containment feature does not work with media queries since those, as the name states, depend on the media size not the specific size of an element.

 

For that you'd have to work your own logic in order to listen to size changes in your iframe's outmost element or a specific element.

 

Hopefully this helps.

Happy tweening!

[kweso]

Yeah, I thought so.

Would you say this is a decent version of such a custom logic? And -- though it is not necessary for this project -- how would I make it react to on the fly size-changes?

See the Pen bGZXvRp by ul-rick (@ul-rick) on CodePen

 

Thank you for your help so far!

[Rodrigo]

Well as @mvaneijgen says: "If it works it works". If the code you have does what you need it works: "If it ain't broken, don't fix it!" 😉

 

If your dimensions are always the same regardless the screen size then it should work, otherwise you should tack into a window resize event and run your logic there and when you cross some value of the ratios that should change the code, kill and revert the timeline and start it again.

 

Hopefully this helps.

Happy Tweening!