Animated gif creation

Easily create and manipulate an animated gif from images. First, choose the images you wish to include in the GIF by tagging them. Then, use the multi API to turn them into animated GIF (the images will be ordered alphabetically within the GIF).

For example, let’s upload this kitten image 6 times -

Ruby:
Copy to clipboard
cl_image_tag("sample_image.jpg", :width=>400, :height=>300, :crop=>"fill")
PHP:
Copy to clipboard
cl_image_tag("sample_image.jpg", array("width"=>400, "height"=>300, "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryImage("sample_image.jpg").image(width=400, height=300, crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("sample_image.jpg", {width: 400, height: 300, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(400).height(300).crop("fill")).imageTag("sample_image.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample_image.jpg', {width: 400, height: 300, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample_image.jpg", {width: 400, height: 300, crop: "fill"})
React:
Copy to clipboard
<Image publicId="sample_image.jpg" >
  <Transformation width="400" height="300" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample_image.jpg" >
  <cld-transformation width="400" height="300" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample_image.jpg" >
  <cl-transformation width="400" height="300" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(300).Crop("fill")).BuildImageTag("sample_image.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(400).height(300).crop("fill")).generate("sample_image.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setHeight(300).setCrop("fill")).generate("sample_image.jpg")!, cloudinary: cloudinary)

One for each angle of 0,60,120,180,240,300 with the “twisted_kitten” tag. The result GIF is ready for further transformations and delivery -

Ruby:
Copy to clipboard
cl_image_tag("twisted_kitten.gif", :type=>"multi")
PHP:
Copy to clipboard
cl_image_tag("twisted_kitten.gif", array("type"=>"multi"))
Python:
Copy to clipboard
CloudinaryImage("twisted_kitten.gif").image(type="multi")
Node.js:
Copy to clipboard
cloudinary.image("twisted_kitten.gif", {type: "multi"})
Java:
Copy to clipboard
cloudinary.url().type("multi").imageTag("twisted_kitten.gif");
JS:
Copy to clipboard
cloudinary.imageTag('twisted_kitten.gif', {type: "multi"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("twisted_kitten.gif", {type: "multi"})
React:
Copy to clipboard
<Image publicId="twisted_kitten.gif" type="multi">

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="twisted_kitten.gif" type="multi">

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="twisted_kitten.gif" type="multi">

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Type("multi").BuildImageTag("twisted_kitten.gif")
Android:
Copy to clipboard
MediaManager.get().url().type("multi").generate("twisted_kitten.gif");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setType( "multi").generate("twisted_kitten.gif")!, cloudinary: cloudinary)

by Maor Gariv