: Workflow for animating part of the bigger graphic. GIF or sprite maybe? Could someone provide a fine crafted footage of how to animate only part of the image? Let's say we have a image 1366x500

@Sarah814

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" />

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

Vote Up Vote Down

@Kevin459

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.

Vote Up Vote Down

@Murray664

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

choosing-a-responsive-image-solution

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

Vote Up Vote Down