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? https://codepen.io/ul-rick/pen/bGZXvRp Thank you for your help so far!

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

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: https://codepen.io/ul-rick/pen/qBvexyp

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

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

thx for your reply. helped me a lot http://kw350.com/tmp/loccaHeaderGSAP/ but it is still not working in my ie10. neither scaling inside the iframe nor bubbles at all. and i guess i'll have to deal with svg, because the generic "pin" is not the correct shape. thx again, kws

hey there, i've been asked to create an animated version of this header: http://locca.azurewebsites.net since i never did propper js/css-animation i first tried it with edge: http://kw350.com/tmp/loccaHeaderEdge/loccaHeader.html but the performance was awful. even on laptops/desktops. so i tried to dive into the code myself since i am quite used to as3. and then i found out that my favored as3-animation package is also availiable for js. yey! now this is what i got so far: http://kw350.com/tmp/loccaHeaderGSAP/ (index.html with iframe containing /loccaHeader/loccaHeader.html the content in the iframe is scaling up to 1280px width). now i would have a few questions, if i may: 1. there is no animation/bubbles in ie10 (btw: win7 64bit). why would that be? 2. is it possible to get the scaling within the iframe in ie? 3. what can i do to improve the performance? (the gs-examples feel so smooth) 4. can the bubbles/particles be scaled from their center? an if i am not too demanding: 5. in the original graphic you an see the bubbles with icons. i made blue bubbles as placeholders for them. those icon-bubbles should morph to location pins when they reach the iphone. would that be possible without using animated gifs? a bit like shapetween in flash (maybe with paper.js?) i would be very thankful for any hint. tyvm, kws