Show HN: I made a free animator. Think Adobe Illustrator but for animation
trangram.com
trangram.com
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!
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?
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.
Jobs and his unwillingness to support it on iPhone killed Flash, and that's that.
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!
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.
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.
Flash died because both Apple and Microsoft wanted it dead. Possibly justifiably.
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.
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?
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.
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.
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.
"HTML5 is going to be the replacement."
So much for that. Goodbye web games.
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.
Don't SPAs do exactly this?
"Google and Yahoo to Search Inside Flash Files" (2008)
https://archive.nytimes.com/www.nytimes.com/idg/IDG_852573C4...
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.
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.
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…
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...
Regardless of what anyone thinks about the proprietary file format and Actionscript and the rendering engine,the actual Flash app itself was one of the best vector animation tools of all time, and when it died we lost something cool and useful.
I'm really looking forward to playing with this in depth. Great job, man!
The second test is: "save it as a gif" I could not do that because I need to create an account. I am weary of sites that lock in my work. Perhaps it would be a good hook-and-reel method to allow one grace save to ensure that what people create in an anonymous trial can be used somewhere else.
All my kids and I know how to use Paint Tool Sai because I trusted the software with our work. It was affordable and ran locally. Great site. I'll pass the word around.
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.
Well done
Any chance of Lottie export? I think I would use this if there was.
So, while I hate saying this, be warned, I was warned and ignored it, and eventually, no matter how tall you feel, that call may come quicker than you think. Keep a second domain around ready to go, make sure you can rebrand. Just my word of (super sad) advice.
Looks great though!
The worst part is that it doesn't even matter if they have a case or not. The mere threat of "Look at how much it'll cost you even if you're right" can be enough for people to pull back.
Recent relevant case is the Sony vs Bleem!, where Bleem! "won" but because of costs, Bleem! had to shut down anyway. So even if Sony lost the court case, they won because they shut down the group.
There is a reason that judges will ask defendents multiple times if they're really, really, truely sure they want to represent themselves before allowing it.
As much as you wish it, a dictionary or common sense does little to nothing in a court of law. Mostly, you'll just annoy the judge who cares not about your dictionary, but the subtle details of copyright law, trademarks, uS code, registration timelines, dates of priority, common use, historical use, due diligence, and 50 other minute technical details I have never even thought about.
I should also clarify that the OP probably made the right choice for them to settle, as they probably had more assets to lose than I do.
In most cases, yeah. Most people have little to no idea how the courts run, so judges often have to give large amounts of leeway to non lawyer pro se defendants.
I have no formal training, and am under no illusions that I'm smart enough to do it. But I am curious if I personally could do it. Argue before a judge, and antagonize court staff to figure out what needs to be filed, and how. All depending on the scale and stakes of the case.
Because telegram is still out there.
https://www.theguardian.com/media-network/2016/dec/02/battle...
I don’t see how even Facebook could have an issue with “telegram” being used commercially, but I wouldn’t be totally surprised if they did.
And, I just had a look, here’s an article by someone (not me) who seemed to experience the exact same threat: https://killdozer.medium.com/facebooks-shame-o-gram-8e71106c...
Not that I don't believe OC, but I don't find any example for this story.
Weird that an American company would claim the word "gram". Thought they hate the metric system. /s
One possible course of action is starting a drama on social media (on not FB) and contacting EFF and such, to get support. Still there will be impact on ones social life and FB/Meta should be punished for making people's life shittier. They think they are too big to fail. I hope one day they will be split up or sued into compliance with some ethics, putting on some tight screws and supervision. This freak show must be stopped.
I think in the EU things might look a bit different, because there was some law against such obvious bullshit lawsuits. Something about "slap" or so in the name of that law? I don't recall exactly.
Honestly, that's incredible.
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 :)
How do you make a new frame
What is safety?
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?
What would you say differentiates it? And why would I pick yours over rive long term?
Interesting tool nonetheless!
[1] https://addons.mozilla.org/fr/firefox/addon/angular-devtools
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-...
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.
Can you tell how you approach to this is? Can you just export SVG animations or even import and edit without destroying the original structure?
This is basically what I'm trying to achieve with Boxy SVG project: a vector graphics editor with UI similar to Inkscape, but focused primarily on SVG editing. It also allows you to easily switch between the code ("Elements") and timeline ("Animations") views: https://boxy-svg.com/blog/21
Very nicely done!
[1] https://www.svgator.com/help/getting-started/js-animations-v...
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?
> 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
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
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 think just re-designing the landing page would make a huge difference, very quickly. I think currently it lets down what is a well-crafted design / animation tool. Get rid of the white and teal, and the default system fonts. The looom site is a lovely example (https://www.iorama.studio/looom).
By the way, your "Features" page is really well made. I would showcase those features on the homepage. I didn't find the list of features until I clicked the link in one of your comments on HN.
You can also make your project more appealing on the homepage by including a looping demo animation (to see what's possible) and a screenshot of the tool.
Best of luck with the project!
That makes me think of Flash.
(edit: ESR browser version slightly out of date, worked after updating. I wonder what new browser feature is being used?)
I'm definitely going to have a closer look at this in the future!
- no direct draw/deform/reshape tools --- Macromedia Flash had these of Futurewave's SmartSketch - no scripting
any possibility of those things getting added? (or could I get a hit w/ a clue stick showing me where in the UI I'm missing them)
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.
Suggestion: - import SVGs? - create custom shapes and groups and add them to a "library" so you can reuse them across projects?
Regarding reusing shapes or groups, you can export them as tg files and import them into your new project. This feature allows for seamless reuse across projects. I hope this clarifies things for you!
one bug, after pressing alt+space, it causes the alt key to be always pressed, which makes everything you move to get copied (as if the user is pressing alt)
Resulting animation can be self-hosted on a web page.
macOS-only, I believe.
Can the units of the artboard be set - for example to mm?
So it was always fighting against exploits that ruined its features.
SAVED
They look super choppy using firefox on macos
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)
Nice to see some free alternatives popping up.
Feature request: Add 'Export to JPEG-XL' option (JPEGXL - https://jpegxl.info/why-jxl.html . See also - FFmpeg Adds Support for Animated JPEG-XL - https://news.ycombinator.com/item?id=36243889 ).
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:
(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.
unless i'm missing something, you don't support export to any vector and/or animated formats besides your own?
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