Jump to content
Search Community

Responsive nightmare

jamesbcn test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?






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

Link to comment
Share on other sites

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):




Also check out the GSAP CSSPlugin Docs:




Hope this helps :)

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...