Animated GIF on Static Photo

Today, I will talk about a nifty trick to integrate animated GIFs in static Photos. Static images can be placed over Static photos in Snapchat, Instagram and Whatsapp. However, we will learn the technique to add animated sticker(s), aka GIF, over a photo.

The final photo will have both the visuals integrated. We will use following steps
  1. Extract frames from GIF*
  2. Place Frame 1 on static Photo
  3. Place Frame 2 on another copy of static Photo
  4. Repeat step 3, until all frame are placed
  5. Finally, take all static Photos from above steps, and create an animated GIF

To put multiple stickers on a photo, do following
  1. Extract frames from all GIFs
  2. Find GIF with maximum number of frames
  3. Loop through with termination counter set to number from Step 2
  4. Add counters for other GIFs (e.g., GIF2 containing 3 frames, j=0)
  5. Place frame i (GIF1 frame), j (GIF2 frame), k (GIF3 frame) etc., on static Photo
  6. Reset given frame counter when its limit is reached, e.g. GIF2 with 3 frames get reset to j=0, on 4th cycle
  7. Repeat step 5 & 6 until Loop in Step 3 terminates
  8. Finally, take all static Photos from above steps, and create an animated GIF

Few caveats
  • The experience can be jittery, if frames in all the GIFs does not have a common divisor, e.g. 3 & 5.
  • The number of GIFs for multiple GIF solution need to be finite set, or else counters will become unmanageable.

Thanks for reading.

*Each animated GIF contains frames (individual images), that can be extracted


Popular posts from this blog

AWS RDS incompatible-parameters solved

504 Gateway Timeout on Amazon AWS ELB (Elastic Load Balancer)