Could someone provide a fine crafted footage of how to animate only part of the image? Let's say we have a image 1366x500 showing some device mockup and we only want to animate the screen of that device which would be smth around 80x30px. The image will go then for a website background. Would be even better to add a hyperlink with that animated screen. Any thoughts?


3 Answers 3


If i get you right and the big picture wont animate and get "replaced" on the little screen: it is possible with responsive webdesign.


and just replace the big image with ur animated gif via media queries on the small screen


Well, the idea of an Animated GIF is that the entire image is replaced with another, like a flipbook. So this isn't possible with that format.

Sounds like what you are trying to achieve is to animate a UI screen on a device, in which you would need to use a program like After Effects to animate your screen, then place it over a photo of your device. After that you export to GIF or Flash or whatever.

Check out the UI presentation templates from a company like Creative Dash. They offer templates for popular devices, and most are compatible with After Effects.


you have a variety of options: already mentioned, and probably your best bet is to use media queries for showing certain screens certain things.
css3 offers up multiple background images, which you could tailor with media queries.

if you are using an actual img / element in your markup, don't forget that you can apply background images to it via css. i've seen a cool demo before where a background .jpg was used on an animated .gif....although i don't think this works exactly for your solution. but awesome to know nonetheless. it was something like this:

<img src="animated-pix.gif" class="pix-bg" alt="whatever" />  

padding:100px 200px 7px 30px; /** these are random. use padding **/  
background:url("animated-pix-ng.jpg") 0 0 no-repeat;  

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.