Responsive nightmare

[jamesbcn]

I have spent several days creating a very nice banner for a website. The main feature of this is a row of buttons which when clicked uses TimeLineMax to move the background image of the main panel to particular pixel-specified positions in a large background image. 

 

I have now installed the banner into the page, and found that making it responsive is not as easy as I anticipated. I had assumed that I would be able to make the content scale with the bounding box, but I've discovered that CSS can't do that. I am now looking for an option that doesn't involve me doing an extensive rework of the banner. One option I have looked at if putting it in an iframe - a bit of a kludge, but it does look as if it will work. 

 

Is there a better way to do this?

 

Thanks, 

 

James

 

(I have now used greensock on a couple of projects, and I like it)

[Jonathan]

Hello jamesbcn, and Welcome to the GreenSock Forum!

 

CSS is used all the time for resposnsive layouts or positioning. Even if you did it with JS, you would still be using JS to apply CSS for responsiveness. CSS can scale (or fit) your content within a bounding box, but it depends how you have your content layout is and what CSS properties and values you have on your elements. It is usually done with a mix of percentages, or CSS media queries, or by recalculating the content within your bounding box. You could even use a resize event handler to apply CSS based on the resizing of the browser. But CSS media queries are good for that depending on your project, layout, and HTML markup.

 

To better help you I would suggest you create a codpen demo example so we can better help you by seeing your code in a live editable environment. This way we can better help by seeing what code you already have done, and code that we can test.

 

Here is a nice video tut on How to create a codpen example.

 

For using GSAP for responsive you can check out this GSAP blog post about xPercent and yPercent (Percentage based transforms):

 

https://greensock.com/gsap-1-13-1

 

Also check out the GSAP CSSPlugin Docs:

 

http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

 

Hope this helps