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!
(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 canvasMessage TextScreen text to make it readableButton to trigger generationCreate Initial GIFAdd text about the pop-up blockerWelcome 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/