Mastodon GIF Maker

Welcome In

Hi there! I'm Alan and I'm glad you stopped by.

I built this yesterday when Twitter was prohibiting links to other social networks. The idea was to provide GIFs so folks could use them instead of links which wouldn't get through. Seems that's no longer necessary, but I'm having fun. I'm gonna keep working on it. Plus, I have this amusing vision of "I'm on Mastodon" GIFs taking over Twitter.

Make Your GIF

Here's the four steps for making your own GIF for Twitter

1. Pick A Background GIF

(I'm adding more GIFs, if you have art that's open source or that you own and are willing to share, I'd love to see about inclding it. Hit me up.)

2. Update Your Text

I haven't wired this preview up to animate yet. It will when you create the final version

3. And Create Your GIF!

Create It
(NOTE 1: It can take a few seconds to generate - NOTE 2: The image is generated in a pop-up window which your browser will probably block the first time. Give it permission, try again and it should work. )

Save the image from the pop-up window and then you can post it on twitter. (NOTE 3: You might need to add the filename including `.gif` at the end.)

4. Post It

That's it for making the GIFs. After you download it, you can post it on Twitter at your leisure. The rest of the page is notes about this project. If you're interested in more details, read on.

Notes

• The start and end point of some of the GIFs are weird. I'm still building the controls to deal with that

This is a super basic first version. I'm still adding features which you can see further below. If you see something that's flat out broken, please let me know on mastodon

Launch Requirements

• Load frames onto canvas
• Message Text
• Screen text to make it readable
• Button to trigger generation
• Create Initial GIF
• Add text about the pop-up blocker
• Welcome message

Next Steps

• Make image show up before text is added
• Add multiple GIF images
• Add texture to provide some individuality (ready but skipping because I don't like what it does to the visual)
• Verify the contrast between the text and background meets WCAG 2 Contrast (Enhanced) Guidelines
• Add on Open Graph Image
• Signal when generation is started
• Make the preview animate
• Add note about gif.js library used
• MORE GIF OPTIONS!
• See about auto assigning a name for saving
• Show more details about the pop-up blockers
• Wrapping text
• Preload different texts (e.g. reminders)
• Dynamic text sizing
• Customized colors
• Better text formatting
• Different text formatting
• QR codes
• Still images as well as GIFs

GitHub

The source code for this site is Open Source and available on GitHub. It's here if you'd like to take a look: alanwsmith/mastodon-gif-maker.

Video Sources

The images were generated from pexel videos. The links are:

• elephant-standing-in-grass-field-11760788
• an-elephant-covered-in-mud-walking-in-the-african-savannah-11760754
• elephant-near-stones-11489108
• footage-of-an-elephant-855538
• river-elephant-elephant-bathing-elephant-in-river-3958529
• an-african-elephant-covered-in-mud-11760745
• astronauts-looking-around-in-a-desolate-area-8474604
• https://www.pexels.com/video/a-n-astronaut-taking-off-his-helmet-8474624/
• https://www.pexels.com/video/an-astronaut-sitting-and-looking-around-in-a-desert-8474595/