Banner animation responsive

[bqhieu]

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!

[Carl]

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. 

[bqhieu]

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...