Jump to content


Banner animation responsive

Recommended Posts

Hi bro,


I need to make responsive on my project. It isn't easy. To be honest, i am done with basic solution. I make multi version for each break-point. Example: one version for min-width:1100px. One version for min-width:750px and max-width:1099px. 


It's working now. Please, have a check : 

See the Pen mPqmZO by bqhieu (@bqhieu) on CodePen


But my code is quite messy with this solution. Also, it isn't good for performance. Do you have any good idea? Please, have a check my clean code which is working for just desktop in here:


See the Pen ZWPJKN by bqhieu (@bqhieu) on CodePen


How can i make it responsive? Thank you in advance for your helping!

Link to comment
Share on other sites

Sorry, there isn't really a quick, easy or single solution to making animations responsive.

Some elements you may need to scale, others you may need to re-position. Also depending on what you intend to do you may need to move and size things based on percents instead of pixels.


Also its one thing to have an animation work at 300x250 and also 600x500 but if you got to a totally different aspect ratio like 300x600 it is not so easy.


It also makes a difference if you want your animations to be flexible while they play, for instance should the animation change while someone resizes a window? or do they just need to be set up once when the page loads and be configured based on the size of their parent container?


Again, its just a lot to try to work through with many variables. Every time I've tried its been a lot of trial and error. 

  • Like 1
Link to comment
Share on other sites

Hi Carl,


Again, you are the first pro jump in to help me. Thanks for that. Yes, i need the animation change while someone resizes a window. But it isn't easy. Seems to be, i have to make multi banner version. It's much easier...

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.