How To Make This Animated Gif (Webflow Uses On Their Site)

Edit: I am looking for a way to create a Gif from still images, not capture my desktop screen and save it as a gif file.

The gif is on this page here, right now its the 4th one that comes up:

This is the gif here:

Is there a tool online somewhere that I can make this type of gif?

I found this program here that lets me make the sliding effect but I can’t do the ease in ease out like the example:
http://www.longtion.com/gifanim/gifanim.htm

Thanks for all the help!

1 Like

I use gyazo.com which works pretty well.

The staff uses Licecap:

http://www.cockos.com/licecap/

I just installed gyazo it and seems like a capture tool, I can’t see how I can create a gif from images.

Gyazo Gif let’s you create animated gifs. It’s probably in the same install as Gyazo.

Licecap seems like another capture tool, I can’t see how I can create a gif from still images.

Gyazo Gif just brought up a capture window for capturing an area of my screen and saving it as a gif file, can’t see a way to create a gif from still images.

Licecap saves your capture as an animated GIF

I don’t have a capture, I have 3 still images I want to make a sliding (ease) gif out of.

I just tried Licecap, here’s a gif from a gif maker which is making a gif:

Edit: I think if you want to make a moving GIF from 3 static images you’ll need an editing program such as Adobe After effects.

whoa… inception…

4 Likes

I feel like I was in an episode of the Twilight Zone for hot minute there lol

Thanks for the help guys, I’ll just stick with program I found and deal with no having the easing effect.

Edit: The program I linked in the first post actually can do it, you just need to edit the frame properties and change the delay on the “out” motion, on the left side

To make that GIF @TravisBKlein

  1. I used QuickTime to make a screen recording of the site
  2. Then dragged the video into Photoshop, set mode to video timeline/motion
  3. Changed the frame rate to 12-15.
  4. Then changed the canvas size to the right dimensions and resized the graphic.
  5. Then I used the save for Web function and exported it as a GIF with an infinite loop :slight_smile:

There may have been some crazy masking/shadow work in there somewhere lol.

There are definitely much easier ways to grab/make GIFS, I just like to have more control over making them. So I usually go the video route then convert it in Photoshop and reduce the frame rate to reduce the file size typically. :smile:

On Mac I also like GIF Grabber, and Windows has quite a few options as well (just search for GIF screen grab app on Google). But Licecap takes the cake for easy to make, clean GIFS. :smile:

3 Likes

This topic was automatically closed after 60 days. New replies are no longer allowed.