Show HN: I made a free animator. Think Adobe Illustrator but for animation (trangram.com)
Trangram is a free one-stop platform to create, and share motion graphics and svg animations with a free built-in powerful editor which is a fusion of Adobe Illustrator and animation tools.
256 comments
[ 4.5 ms ] story [ 352 ms ] threadNice to see some free alternatives popping up.
Trangram, however, is more than that, it supports (1) morphing between two shapes (actually any shapes you can create or imagine) without extra efforts (2) motion path, which means you can define an arbitrary route and let your object move along that path easily (3) parent link, which means linked object can move, rotate and scale together
There're many more exciting features I don't mention here, you can check them from Trangram about page below.
https://www.trangram.com/about
Thanks so much for your comment and letting me know about Macromedia Director.
I used Macromedia Director to let users navigate for information, akin to an ATM but for info. A partnership led to including quite a few animations of Cardiology and similar info-animation.
The ability of Macromedia Director and then Flash to see what you are doing immediately was what draw me into the world of scripted visuals.
1. https://en.wikipedia.org/wiki/Lingo_(programming_language)
2. https://en.wikipedia.org/wiki/State_Bank_of_India
3. https://en.wikipedia.org/wiki/Wockhardt_Hospitals
In designing and implementing Trangram, ease-of-use ranks high on my list of priorities, alongside functionality and safety.
Just as you mentioned, one of my primary motivations was to facilitate the creation of educational materials, which I was particularly inspired by experiences while watching The Power Of A Mathematical Picture
https://www.youtube.com/watch?v=6vnMT70HOxc&list=PLOxODW9vlV...
I've designed Trangram as more than just an editor; it's a platform intended to democratize content sharing. Every individual should have the opportunity to disseminate valuable content to others, whether through a simple link or embedded HTML code (allowing for easy integration on personal blogs or websites).
My aspiration is for Trangram to evolve into a secure and enriching environment for all, including children, fostering a space where learning flourishes.
I really hope Trangram gets some traction so you have the time and resources to further develop it, it's a tool that has potential to make the world a nicer place :)
What is safety?
How do you make a new frame
Very nicely done!
Some suggestions though:
- Would be awesome to be able to open an existing animation (eg. like any of the ones showcased). It's a built overwhelming for a noobie opening up to a blank editor page.
- Could also consider putting a tutorial video
Anyways I'll have to play around with this.
I made it in 5 seconds and published it, then it was embarrassed to be listed on the top page.
Let's publish it unlisted!
user/dai
I’ve often wondered why no one has come up with a new product in this space. I think the long term demise of Flash has put off anyone even trying.
There are so many great uses for animations on the web, even if we don’t need full blown user interfaces of them and intro screens like we did back in 2002.
Great job!
Meaning you can still create all the animations and games, but then you will have to try to port it to js and canvas (via easeljs). And that did not work very nicely last time I tried it.
The Internet Archive is using it to preserve the profound cultural heritage of early millenial flash animations.
https://www.theverge.com/2020/11/19/21578616/internet-archiv...
i.e. you can animate a bird with flapping wings, then drag 3 copies onto your sky.
Or play a different animation of a subelement on mouseover e.g. bird.flapWings()
And quite some other things ..
This is not a flash replacement and also does not aim to be one.
I wish Microsoft PowerPoint built some of that so we could use it for light weight animations and story telling.
And interesting choice of words!
So sad that Adobe were unwilling / unable to just make it output html5 instead of swf. But Adobe so where software goes to die so…
It’s pretty much modern Macromedia Flash. Except a JS runtime, rather than plugin.
For Trangram - it might help to link each of the examples in the "Explore & Get Inspired" section to the editor, allowing new users to avoid the "blank page" syndrome.
The actual animations and (sometimes) beautiful interfaces were not the problem. People generally loved that.
Generally there's no need for a new product in this space because CSS does everything Flash once did, but adheres to web conventions.
There probably is an opportunity, though. I'm not a motion graphics person - does Adobe Animate fit the bill at all? What do you think is missing today that we once had with Flash?
It got killed because Apple stopped supporting it. That's the reason.
That's how it happened in my orbit anyway.
Steve Jobs published an open letter entitled "Thoughts on Flash", in which he said that iOS would never support Flash. We had a discussion at the web shop I was working for; we decided to stop making new things in Flash.
https://en.wikipedia.org/wiki/Thoughts_on_Flash
I worked for a boutique consulting firm at that time and Warner Bros/Telepictures was our big client. We immediately got calls from a lot of execs and I had a week long firedrill of converting MANY Telepictures properties from Flash (mostly for the video content rendering with timecoded UI updates). They also had a video delivery company that was co-located with AOL fly out to Burbank and fly back with tons of hard drives full of episodes of Ellen, the Tyra Banks show, etc to recode from Flash video to video that could be served with the <video> content tag on iPads.
It somehow all got done by the iPad release and Apple published a top 10 "sites that work great on iPad" page on their site and we had done 4 out of 10 of them. All we had to test on was desktop Safari resized to the screen size they told us it needed to work on.
For 10 years flash minted thousands of young animators and content creators. Since flashes death there are far fewer upstarts and communities despite Internet adoption being magnitudes higher
The rampant piracy of old Flash versions probably helped a lot too.
"HTML5 is going to be the replacement."
So much for that. Goodbye web games.
Also, flash was most certainly not pixel based. It was vector based and a common workflow was to create your graphics in the more powerful Adobe Illustrator, then import into flash for animation.
Flash died because Microsoft was agressingly nipping at Adobe on the commercial side with Silverlight, because standard bodies were finally chipping away at its feature advantages with long-needed improvements to HTML, CSS, and Javascript, and most impactfully of of all: because Steve Jobs decreed it.
The death knell for Flash sounded exactly when the market-revolutionizing iPhone refused to support altogether.
But all of that's just about the runtime platform. The posted app calls back to the Flash editor itself, which was extremely mature and powerul but had too much inertia to successfully pivot to targeting HTML or apps before Adobe would give up on it.
Later apps have come, but inevitably start far behind the features that Flash offered designers, animators, and developers at its peak.
It's more of a curiosity or footnote than a relevant factor.
The consumer usage of Flash was most visible (games, cartoons, brochure sites, video streaming) and Apple's evisceration of that market was what ultimately killed Flash, but things were already looking grim on several fronts before that happened.
I still miss macromedia Director though. I learned to program with HyperCard and then director, and I always thought it was a shame it got canned when adobe bought it.. it was much nicer in lots of ways, although the player was more heavyweight. Actually, I don’t think I’ve ever really found a proper replacement for HyperCard!
Jobs and his unwillingness to support it on iPhone killed Flash, and that's that.
But this is only a vague memory of some article in a magazine or something similar, so take it as anecdotal at best.
But at the time, I don't believe Adobe engineeing publically bothered to swim upstream against this, and while there were third-party attempts to run SWF files or AIR applications on iOS they were indeed janky and slow (as you would expect).
So I'd give your memory like a B+ on this one!
That being said the only people who complain about not having JIT on iOS are Mozilla and people who want to run game console emulators, which Apple doesn't want their users having because they despise the Church-Turing thesis. Game developers that use engines with VMs in them just develop around the execution of those VMs being very slow.
Apple wasn't refusing to support Flash on mobile Safari. The actual story is more complicated: Apple tried to collaborate with Adobe four times on mobile Flash but, depending on who you ask, Adobe either shipped code that just plain didn't work on phones, or Apple couldn't be bothered to even get Flash to compile. Probably both are true. The very public open letter from Jobs regarding Flash is after Adobe said "fuck it" and decided to ship what they had as a packaging solution for developing iOS apps. While most of the open letter is written to say "this is why we're not shipping Flash as a browser plug-in", the real reason it was published was to justify rule changes in their developer agreement intended to prohibit porting Flash apps to iOS.
Said rule changes were overturned in 3 months, thanks Obama.
Instead they made a converter where you lost audio, video, scripting, effects, etc. It should have at least been able to convert a Homestar Runner cartoon.
Flash died because both Apple and Microsoft wanted it dead. Possibly justifiably.
It was largely a fallacy perpetuated by Apple. The same fallacy used to more recently justify the app store exclusivity, aimed at preserving their enclosed ecosystem under the guise of protecting users from potential malware threats.
While it's true that Flash posed security risks, not just on mobile but across platforms. Acrobat pdf readers continue to grapple with high-severity CVEs.
Another argument against Flash support on the iPhone was its purported battery drain. It's worth considering the technological landscape of that era: Arm processors were less power-efficient, and early iPhones struggled with battery longevity. Remember, even basic color screen phones could last several days on a single charge—illustrated by the enduring appeal of the Nokia 3210, which could comfortably endure a week without needing to be plugged in.
Yes flash early implementation for mobile was very inefficient.
Yes Apple had valid reasons for resisting Flash support. However, at the heart of the matter was Adobe's lion stance on royalties, a proposition deemed cocky by Jobs. Plus jobs was in the money Business. So the moot negociation red eventually led to a declaration war on Adobe.
Despite Adobe's towering market cap, and arguable more influential in the tech spheres, they underestimated Apple's strategic timing and their ability to a big push for new web standards, which ultimately led to the widespread adoption of HTML. Adobe's defeat to maintain their spotlight animation authoring tool for the web. Cousin comment touches on its disrespect for existing web standards, it never evolved to embrace the browser, it kept running as its own thing with limited to no interfacing with the browser API even.
This conflict not only signed the future death certificates of Flash but also spelled the end for other authoring tools which came from the Macromedia umbrella, and those had already begun to lose relevance post-Adobe acquisition.
Adobe's numerous acquisitions, it's easier to enumerate the surviving applications since the launch of the iPhone than to list those consigned to oblivion.
Not exhaustive, but here is the gist: Adobe applications that have ceased to exist since 2006:
Adobe mainstream products that have ceased to exist since 2006: - Flash - Fireworks - Dreamweaver (on life support) - GoLive - Muse - Encore - Contribute - SpeedGrade - Story - Edge Animate - Edge Reflow
Adobe mainstream products that remain plus those created or aquired since 2006: - Photoshop - Illustrator - InDesign - Premiere Pro - After Effects - Acrobat - XD - Audition - Figma
You could add Lightroom to your list of survivors.
Autodesk employed a similar acquire, absorb some features and then retire strategy, in the CAD 2D/3D space.
What was the fallacy?
Tell me you never used Flash by not telling me you've never used flash.
Flash's USP and core value proposition was the (IMO) fantastic IDE that you used to create flash apps and animations. It was exactly as technical as you needed it to be. As you upskilled you could do more things, but more importantly do the same things more elegantly. In stead of a manual animation you could script it out in AS3. I loved it and I'm really sad that I only entered the professional workforce as Flash was on it's way out.
As a UX professional, the death of Flash was one of the most satisfying moments of my career. It's hard to overstate how much better the web is today than it was when it was overrun by sealed-off Flash sites.
I think Apple claimed that Flash was too power hungry to run on a mobile device.
I was hired back in the day to convert a flash based app to a "Dynamic HTML" app. The flash developers all quit because they didn't want to work with HTML and Javascript. And this was all because the company wanted to support iPhones and iPads. And there were a lot of companies doing the same exact thing back then - abandoning Flash for HTML/Javascript/CSS.
"Google and Yahoo to Search Inside Flash Files" (2008)
https://archive.nytimes.com/www.nytimes.com/idg/IDG_852573C4...
Don't SPAs do exactly this?
https://www.wickeditor.com/#/
It seems to have automatically switched to selection mode, rather than keeping in the mode I deliberately switched to (line mode).
That's unexpected, and probably not what most users would expect. Any chance of getting that changed, so the mode only changes when the user does it?
---
Also, is it Open Source? :)
No, also:
"We reserve the right to modify this Agreement or its terms related to the Services at any time at our discretion."
So it is currently free of charge, but may one day contain tracking without warning, or paid membership? The buisness plan (how to make money) is not clear to me. And this would be a major blocker for me to use if for anything serious, when one day I might loose access to my data, unless I pay an unspecified amount. You also cannot export your work to a common vector format, so will be bound by this website forever.
If you are looking for something Open Source, there is the wick editor:
https://www.wickeditor.com/
(but developement is on hold)
Already been through that exercise with Adobe and the Flash ecosystem.
No interest at all in a repeat.
Development is kinda slow, but this also means that it still works just as well as when I made a little short movie 15 years ago.
One very interesting new one is rive.app Closed app, free for 3 files, but open source renderer and GPU accelerated.
Can the units of the artboard be set - for example to mm?
unless i'm missing something, you don't support export to any vector and/or animated formats besides your own?
(edit: ESR browser version slightly out of date, worked after updating. I wonder what new browser feature is being used?)
https://www.trangram.com/post/65bdd64d51a9f658905fa662
Well done
Any chance of Lottie export? I think I would use this if there was.
It took me 5 min to redo a animated logo that took me a few hours 3 years ago with Adobe. I will use it.
Try to make the people land immediately on the editor instead of the landing page. And focus on the sharing aspects so it gets viralized.
Public you're aiming to?
Some small suggestions:
- Please add some keyboard shortcuts for common actions, i.e., cmd/ctrl + z to undo (+ shift to redo), delete/backspace to delete, cmd/ctrl + d to duplicate, cmd/ctrl + a to select all.
- Increase rotate cursor affordance - it's currently relatively tiny.
I mean I get the ease of deployment -- just open the webpage and use it.
But this application is just temporary; it won't exist after 15 years; it will change into something else, or it will cease to exist. It will be impossible to use older version of it. It won't be possible to preserve it, emulate it. If the server is off, the application dies. In contrast, it's still possible to install the original Lotus 1-2-3, an application from 1983.
The amount of applications that I've seen which aren't available anymore (even to be seen) is staggering. I see it as a waste of resources. Webapps have their advantages, but I see their core trait as ephemeral -- that might be sometimes a good thing, but I see it as a disadvantage.
Anyway, I will try my best to make Trangram sustainable and bring values to everyone by creating and sharing creative contents.
Speaking as a non-professional JS programmer, where can I read about how to architect a program like this where you select a tool, then that tool lets you draw (or do something) on canvas. Another tool, has a different behavior to mouse click/movement while initial placement and later editing of the nodes. Architect it in such a way that its not a long list of if statements for state management.
The recently shared Eloquent Javascript[0] had chapter 19 making a pixel editor. That seems to be a good approach, but then I wouldn't know any better. Any recommended reading or small size sourcecode that one could read and learn?
[0] https://eloquentjavascript.net/19_paint.html
You'd need to build all of that functionality yourself. You detect where the user is pointing/clicking, then draw the element they are creating as visual feedback, then once done, persist the element somewhere.
If a user clicks on the element again, somehow display that it is selected and display the tools for editing.
You could build it in vanilla JS, or use a framework like React.
I think fabric.js is worth checking as its source code is well organized and documented. It's not a small project though and the latest version was rewritten in TypeScript: https://github.com/fabricjs/fabric.js/tree/master
The live version is at https://tldraw.com
> Speaking as a non-professional JS programmer, where can I read about how to architect a program like this where you select a tool, then that tool lets you draw (or do something) on canvas.
I've not got any sources for you, but I think the EJ chapter makes the key point that however you architect the project, you really, really need to keep as much of your user interface as possible in HTML/CSS, if only for accessibility. When it comes to manipulating graphical objects already added to the canvas, I'm not a great fan of the "box controls" approach (for controlling width, height, scaling, rotation) - which a lot of canvas libraries seem to include - because I can't think of an efficient/elegant way to make those controls accessible.[2]
The other big issue is keeping track of state, and possibly state history if you want undo/redo functionality. For this you really need to think of building on top of an existing canvas library - many will make state management a lot easier to handle, leaving you more time to build out the interesting stuff. There's a lot of excellent libraries out in the wild for you to choose from[3].
Or you could build your own canvas library. I've had lots of (at times frustrating) fun over the past 10 years doing just that. Highly recommended!
[1] - http://paperjs.org/
[2] - My proof-of-concept attempt for an alternative approach to controls. Sadly not very pretty: https://scrawl-v8.rikweb.org.uk/demo/modules-005.html
[3] - https://benchmarks.slaylines.io/