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:
cl_image_tag("cloudinary_animation.gif")
PHP:
cl_image_tag("cloudinary_animation.gif")
Python:
CloudinaryImage("cloudinary_animation.gif").image()
Node.js:
cloudinary.image("cloudinary_animation.gif")
Java:
cloudinary.url().imageTag("cloudinary_animation.gif")
JS:
cl.imageTag('cloudinary_animation.gif').toHtml();
jQuery:
$.cloudinary.image("cloudinary_animation.gif")
React:
<Image publicId="cloudinary_animation.gif" >

</Image>
Angular:
<cl-image public-id="cloudinary_animation.gif" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("cloudinary_animation.gif")
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:
cl_image_tag("cloudinary_animation.gif", :width=>0.5, :crop=>"scale")
PHP:
cl_image_tag("cloudinary_animation.gif", array("width"=>0.5, "crop"=>"scale"))
Python:
CloudinaryImage("cloudinary_animation.gif").image(width=0.5, crop="scale")
Node.js:
cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("cloudinary_animation.gif")
JS:
cl.imageTag('cloudinary_animation.gif', {width: "0.5", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})
React:
<Image publicId="cloudinary_animation.gif" >
  <Transformation width="0.5" crop="scale" />
</Image>
Angular:
<cl-image public-id="cloudinary_animation.gif" >
  <cl-transformation width="0.5" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("cloudinary_animation.gif")
Resize

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

Ruby:
cl_image_tag("cloudinary_animation.gif", :angle=>90)
PHP:
cl_image_tag("cloudinary_animation.gif", array("angle"=>90))
Python:
CloudinaryImage("cloudinary_animation.gif").image(angle=90)
Node.js:
cloudinary.image("cloudinary_animation.gif", {angle: 90})
Java:
cloudinary.url().transformation(new Transformation().angle(90)).imageTag("cloudinary_animation.gif")
JS:
cl.imageTag('cloudinary_animation.gif', {angle: 90}).toHtml();
jQuery:
$.cloudinary.image("cloudinary_animation.gif", {angle: 90})
React:
<Image publicId="cloudinary_animation.gif" >
  <Transformation angle="90" />
</Image>
Angular:
<cl-image public-id="cloudinary_animation.gif" >
  <cl-transformation angle="90">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(90)).BuildImageTag("cloudinary_animation.gif")
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:
cl_image_tag("cloudinary_animation.gif", :overlay=>"text:Arial_40_bold:Sample%20text")
PHP:
cl_image_tag("cloudinary_animation.gif", array("overlay"=>"text:Arial_40_bold:Sample%20text"))
Python:
CloudinaryImage("cloudinary_animation.gif").image(overlay="text:Arial_40_bold:Sample%20text")
Node.js:
cloudinary.image("cloudinary_animation.gif", {overlay: "text:Arial_40_bold:Sample%20text"})
Java:
cloudinary.url().transformation(new Transformation().overlay("text:Arial_40_bold:Sample%20text")).imageTag("cloudinary_animation.gif")
JS:
cl.imageTag('cloudinary_animation.gif', {overlay: "text:Arial_40_bold:Sample%20text"}).toHtml();
jQuery:
$.cloudinary.image("cloudinary_animation.gif", {overlay: "text:Arial_40_bold:Sample%20text"})
React:
<Image publicId="cloudinary_animation.gif" >
  <Transformation overlay="text:Arial_40_bold:Sample%20text" />
</Image>
Angular:
<cl-image public-id="cloudinary_animation.gif" >
  <cl-transformation overlay="text:Arial_40_bold:Sample%20text">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("text:Arial_40_bold:Sample%20text")).BuildImageTag("cloudinary_animation.gif")
Adding text

by Itay Taragano