Streaming live at 10am (PST)

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


#1

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:
https://webflow.com/discover/popular#recent

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!


#2

I use gyazo.com which works pretty well.


#3

The staff uses Licecap:

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


#4

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


#5

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


#6

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.


#7

Licecap saves your capture as an animated GIF


#8

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


#9

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.


#10

whoa.... inception...


#11

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


#12

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 :)

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:


#13

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