Trangram is an old term for tangram, the puzzle that inspired me to create a tool that makes it easy to animate and design.
As a child, I was fascinated by puzzles, anime, and drawing. I fondly remember the joy of playing with tangram puzzles, watching Dragon Ball and Pokémon, and sketching characters like Goku and Pikachu. Back then, tools like MS Paint and PowerPoint were too limited for drawing and creating animation, while Illustrator and Flash were either too complicated or tedious for a teenager to use. With few resources and tutorials available online, I never imagined I could create animation on my own.
Years later, I pursued a degree in Computer Science and began my career as a software engineer. I was impressed by the visual and animated learning resources I encountered while revisiting math and algorithm concepts. However, the idea of creating animation still seemed daunting — traditional methods were labor-intensive, and coding didn’t feel like the right approach for creative work, which needs more freedom and flexibility.
In 2019, my interest in animation was reignited by motion graphics. I tried using After Effects, but its complex interface and lack of basic illustration features left me frustrated. Adobe Animate confused me even more with its various keyframes and tweenings options, and its frame-by-frame-oriented interfaces. It felt like these tools were designed exclusively for professionals. I wondered why there wasn’t a tool that allowed both design and animation in one place, with a straightforward approach as simple as arranging pieces in a tangram puzzle.
Later that year, I decided to create my own tool — one that would make designing illustration and animation simple and accessible for everyone, right in their browser. Within a year, I developed the first version, which included advanced features like morphing and rigging. While functional and user-friendly, this version's graphic design and animation capabilities were limited to basic shapes and scene-based transitions. Feeling constrained by these limitations, I chose not to release it to the public.
Reflecting on the experience of developing the first version, I realized that addressing these limitations required using Bézier curves for flexible lines and shapes. Additionally, implementing a timeline and keyframe system was crucial for allowing separate transitions for each object and adding advanced features like easing and looping.
With these solutions in mind and a deeper understanding of my tool’s power and complexity, I felt excited to restart. To ensure a solid foundation, I began developing the second version of Trangram from scratch in late 2021, applying the new techniques I had learned. This time, I ensured the basic features such as object selection, layering, transforms, and path editing were smooth and reliable before moving on to more advanced features like rounded corners, morphing, motion paths, and looping.
To maximize the quality and power of Trangram, I used it to create non-trivial motion graphics throughout the development process. Using the tool as a real user and engaging in an iterative development process extended the time and effort required, but the extra investment was worth it because it ensured Trangram aligned with my original purpose — building a quality tool that is easy and enjoyable to use. I enjoyed every moment of working on the second version, getting excited each time I implemented a new feature and applied it to my next motion graphic.
As a hobby project, and after nearly two years of effort, Trangram evolved into a powerful tool with a user-friendly interface for creating motion graphics. It allows users to modify and animate designs at any stage, using the same set of tools, all within a web-based editor. I was very excited about what Trangram could achieve and was eager to share it with others.
In late 2023, I prepared Trangram for public release and spent a few extra months working on website features such as security, posts, comments, sharing, and the gallery. On March 12, 2024, I finally launched Trangram on Hacker News and the feedback was positive — people loved Trangram's capabilities, ease of use and clean interface. I was so excited that I couldn’t fall asleep that night.
The positive response motivated me to create video tutorials to help users explore more of Trangram’s features and encouraged me to keep improving it for more possibilities. I will continue to enhance Trangram, as there are still many exciting features I want to add.
For now, I hope you find Trangram useful for creating animation and illustration. Most importantly, I hope you enjoy the creative process as much as I do when using Trangram. If you like Trangram, please share this free tool with others, subscribe to my YouTube channel, join r/Trangram, follow my Twitter, or consider making a donation at paypal.me/DakuiLiu. I appreciate your support!
