Proportionally scalable eAdvertising / banners

[fripi]

Hi guys,

 

this won't be explicitly a gsap question I think, or maybe a gsap solution exists. 

 

I've already searched on the forum and have read a lot of topics about responsive, scaling,...

But didn' found a solution that worked for my problem.

 

I did a whole campaign of banners and now the media agency comes back to me complaining "it's not responsive" but from what I understand they need banners that scales down when needed and keep it's proportions.

 

So for example I have a 970x250 format but they also want to use it for mobile and it must scale if the desktop browser gets smaller than 970 width... I thought they where using an iframe with a content scaling but no it's js injection or something like that that I don't know, I'm really not a js genius...

 

So I need to quickly adapt a whole campaign to that need, I made a codepen of a typical banner as I'm used to do.

I'm trying to find out how to scale this banner when browser/mobile gets smaller, any idea ?

 

See the Pen QWPXEeL by fripi (@fripi) on CodePen

[Rodrigo]

Hi,

 

As far as I can see this in your demo is scaling properly. What exactly is not working, or the issue here? Sorry but maybe I'm missing something obvious here 🤷‍♂️

 

Maybe you could check GSAP MatchMedia, but I'm not sure if your question/issue is in that realm:

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

Sorry I can't be of more assistance, if can please be more specific about what should happen in your demo as you reduce the screen width.

 

Hopefully this helps.

Happy Tweening!

[fripi]

8 hours ago, Rodrigo said:

As far as I can see this in your demo is scaling properly. What exactly is not working, or the issue here? Sorry but maybe I'm missing something obvious here 🤷‍♂️

Hi, thank you, indeed I continued searching for hours yesterday and found this solution using gsap:

function resizeAd () {
	var scaleRatio = adcontainer.offsetWidth/sc.offsetWidth;
	gsap.set(scalableContent,{scale:scaleRatio});
}
window.addEventListener("load", resizeAd);

I'm not sure it's the most optimised but it seems to work, I'm waiting for a live test of the media agency.

 

I cleaned up the code a little and maybe this will help others in the futur.

[Rodrigo]

Hi,

 

Great to hear that you were able to find a solution and I hope that you get good news from the agency

 

Thanks for sharing your solution 💚

 

Happy Tweening!