kweso Posted February 26 Share Posted February 26 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 Link to comment Share on other sites More sharing options...
GSAP Helper Posted February 26 Share Posted February 26 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. ✅ Link to comment Share on other sites More sharing options...
kweso Posted February 26 Author Share Posted February 26 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 Link to comment Share on other sites More sharing options...
kweso Posted February 26 Author Share Posted February 26 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted February 26 Share Posted February 26 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! 1 Link to comment Share on other sites More sharing options...
kweso Posted February 26 Author Share Posted February 26 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted February 26 Share Posted February 26 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! Link to comment Share on other sites More sharing options...
Solution kweso Posted February 27 Author Solution Share Posted February 27 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! Link to comment Share on other sites More sharing options...
Rodrigo Posted February 27 Share Posted February 27 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now