*Update (2015): Before you can use a delivery URL such as the ones described in this post, you must first pre-generate the GIF with a call to the multi method of the upload API. The delivery URLs described in this blog post are used to display the pre-generated animated GIFs. For details, see Creating animated GIFs in the Cloudinary documentation.
Back in the 1990s, websites mainly comprised of static textual pages dashed with a few images to make them slightly more appealing. You could even disable image downloading in your browser to make pages load faster, quite unthinkable in today’s websites.
In order to make web pages look more alive, developers started looking for animation solutions. Proprietary browser plugins started to appear, followed by a real usability breakthrough – the enhanced, 89a GIF format. As part of its many enhancements, this new format allowed for simple animation sequences. While initially supported only by the Netscape browser, using GIF to add animations has proved quite straightforward and soon became very popular.
In this blog post we wanted to show you how to easily generate simple animations with Cloudinary and how to generate animated GIF files that are still very useful for short animation sequences.
With Cloudinary overlays and chained transformations it is very easy to generate an image where the arrows appear above the cloud icon. The following URL first expands the cloud icon to a 280×150 image with white padding and then adds an overlay with the arrows in the top left corner:
We can use the custom overlay coordinates to position the arrows in a different location. We can also apply a brightness effect as the following example shows. The arrows are now positioned 150 pixels from the left. We also applied another cropping transformation to make sure that the final image remains 280×150 even if the arrows overflow outside the original canvas.
Quick side-note – don’t you think it’s quite amazing what you can accomplish so easily with Cloudinary? If you don’t have an account already, you can go ahead and sign up for a free account, we’ll wait… (and if we were back in the early 1990s, this link would probably be flashing red 🙂
You could probably already guess where we’re aiming at. Using the previous overlay concepts and a simple script, we can now create an animation sequence depicting the arrows moving from left to right while growing lighter and lighter until disappearing.
The following Ruby script uses Cloudinary’s Ruby GEM to generate 34 images that construct the frames of the animation. The same can be easily done using any of our other client libraries (PHP, Python, Node.js, etc.), or directly with our URL-based apis.
The script programmatically generates transformation URLs similar to the examples above. Horizontal (X) position of the arrows moving from -50 to 280. Brightness effect increasing while X position increases. The URL is then given to Cloudinary’s upload API call to generate a new image based on the given transformation.
All generated images were assigned with the tag arrow_animation. If you are familiar with Cloudinary, you probably know that a tag can be used to generate a ‘sprite‘ – a single image merging together all images of the same tag. Click on the following links to view the sprite image and generated CSS. You can see all the animation frames in this sprite.
Animated GIFs might be a little restrictive with their small 8 bit indexed color space and inefficient lossless compression. Still, these can be quite indispensable in various occasions.
We’ve shown you how you can programmatically achieve powerful transformations, frame generation and GIF-based animations, easily and efficiently. We hope that these building blocks will be useful for your projects. We’re sure that they will give you some interesting ideas of what you can accomplish with Cloudinary!
Say, you want to place a two-dimensional image on a curved surface, such as a mug or bottle, to create a product mockup or highlight printing capabilities. Thanks to Cloudinary’s displacement-mapping feature, that’s easy to do. Here’s how displacement mapping works. By means of a map image, the algorithm displaces…