Animated GIF manipulation

Transform animated GIFs just like any other image. Use Cloudinary's powerful image transformation tools to manipulate your animated GIFs just like you do for other standard still images.

Here's an example of an animated GIF uploaded to Cloudinary:

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

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

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

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

Let's say we want to resize the animated GIF by half of its original size. This can be applied simply by using a decimal value to define the size you need, so for half of the image's size we can use the following:

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

Here's an example of using the angle parameter (a in URLs) in order to rotate the image 90 degrees clockwise:

Ruby:
Copy to clipboard
cl_image_tag("cloudinary_animation.gif", :angle=>90)
PHP:
Copy to clipboard
cl_image_tag("cloudinary_animation.gif", array("angle"=>90))
Python:
Copy to clipboard
CloudinaryImage("cloudinary_animation.gif").image(angle=90)
Node.js:
Copy to clipboard
cloudinary.image("cloudinary_animation.gif", {angle: 90})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().angle(90)).imageTag("cloudinary_animation.gif");
JS:
Copy to clipboard
cloudinary.imageTag('cloudinary_animation.gif', {angle: 90}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("cloudinary_animation.gif", {angle: 90})
React:
Copy to clipboard
<Image publicId="cloudinary_animation.gif" >
  <Transformation angle="90" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="cloudinary_animation.gif" >
  <cld-transformation angle="90" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="cloudinary_animation.gif" >
  <cl-transformation angle="90">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(90)).BuildImageTag("cloudinary_animation.gif")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().angle(90)).generate("cloudinary_animation.gif");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAngle(90)).generate("cloudinary_animation.gif")!, cloudinary: cloudinary)
Rotated

Applying image transformations for animated GIFs isn't limited to resizing of course. You can apply any of further transformations, including chained transformations. For example, here's how to add a text to our animated GIF

Ruby:
Copy to clipboard
cl_image_tag("cloudinary_animation.gif", :overlay=>{:font_family=>"Arial", :font_size=>40, :font_weight=>"bold", :text=>"Sample%20text"})
PHP:
Copy to clipboard
cl_image_tag("cloudinary_animation.gif", array("overlay"=>array("font_family"=>"Arial", "font_size"=>40, "font_weight"=>"bold", "text"=>"Sample%20text")))
Python:
Copy to clipboard
CloudinaryImage("cloudinary_animation.gif").image(overlay={'font_family': "Arial", 'font_size': 40, 'font_weight': "bold", 'text': "Sample%20text"})
Node.js:
Copy to clipboard
cloudinary.image("cloudinary_animation.gif", {overlay: {font_family: "Arial", font_size: 40, font_weight: "bold", text: "Sample%20text"}})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(40).fontWeight("bold").text("Sample%20text"))).imageTag("cloudinary_animation.gif");
JS:
Copy to clipboard
cloudinary.imageTag('cloudinary_animation.gif', {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(40).fontWeight("bold").text("Sample%20text")}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("cloudinary_animation.gif", {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(40).fontWeight("bold").text("Sample%20text")})
React:
Copy to clipboard
<Image publicId="cloudinary_animation.gif" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 40, fontWeight: "bold", text: "Sample%20text"}} />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="cloudinary_animation.gif" >
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 40, fontWeight: "bold", text: "Sample%20text"}} />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="cloudinary_animation.gif" >
  <cl-transformation overlay="text:Arial_40_bold:Sample%20text">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Arial").FontSize(40).FontWeight("bold").Text("Sample%20text"))).BuildImageTag("cloudinary_animation.gif")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(40).fontWeight("bold").text("Sample%20text"))).generate("cloudinary_animation.gif");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_40_bold:Sample%20text")).generate("cloudinary_animation.gif")!, cloudinary: cloudinary)
Adding text

by Itay Taragano