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.
Back in the day I used to do quite a lot of Macromedia Flash work. It’s uncannily similar but a modern take.
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.
IMO, Flash died because it didn't play nice with the conventions of the web. There were workarounds, but generally it broke all of the things HTML could do, like being searchable & selectable, navigable with a keyboard, built of code you could inspect, addressable with a direct link, even working with the browser's back button.
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?
No. Generally, the missing features you mention were inconsequential to decision-makers (outside of some ideological devs) and many of them were being gradually addressed by Macromedia/Adobe anyway.
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.
Internally Adobe hated Flash. It strode right past Live Motion which used the UI paradigm of After Effects to produce animations which didn't cater to the traditional key framing model Flash was built on. I feel pretty strongly that there were forces inside Adobe that wanted to take advantage of the merger to bury the Macromedia IPs. Adobe had a great relationship with Apple. Photoshop was finely tuned to work on Macs and the majority of the creatives using it were working on Macs. Adobe could have threatened to put Apple's computers in the ground by limiting Photoshop support for OSX in 2009 in order to gain support for Flash on iOS. They didn't. They just never thought of Flash as an Adobe product. If Apple stopped supporting Photoshop things would have gone nuclear.
Word on the street, at the time, was that Apple and Adobe collaborated actively on making Flash work on the iPhone without straining its battery. It is the failure to achieve that goal that prompted the whole about-face.
I think Silverlight was making deep inroads in the enterprise market for rich internet apps and that this was a growing customer retention issue for Adobe with Flash. That's part of why they invested so much in Flex and AIR as a more engineering-centric alternative to the Flash app's designer-centric timeline interface. They wanted to shore up what they were losing to Microsoft.
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.
The original Netflix streaming site used Silverlight, I'm guessing because browser DRM wasn't up to snuff at the time. That's about the only time I willingly used it.
Edit: I replied to the wrong comment, although this still stands!
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!
Yes, people forgot that websites for big companies were often flash based trash until the iPhone and the web changed to be mobile friendly as iPhones sales continued to skyrocket.
I remember reading something about how difficult it was to get flash to render correctly on iphone hardware at the time because it had no hardware support and software emulation was slow and terrible at best.
But this is only a vague memory of some article in a magazine or something similar, so take it as anecdotal at best.
Apple specifically refused to support Flash in mobile Safari and the original sandbox model for apps prevented any kind of perfomant virtual machine for something as sophisticated as SWF (or Java or .NET). That's improved some in the 15 years since, although the sandbox is still fairly conservative and tight.
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).
The current sandbox model for apps still does not allow any sort of performant VM; by design. Hell, one of the biggest announcements of Apple's DMA compliance is just that they had to provide entitlements to access some kind of JIT support on iOS. They are extremely pissed that they had to do that, only they are supposed to be allowed to JIT code.
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.
I still mourn the disappearance of the game development and distribution scene that Flash made possible. It seems like all we have these days are walled-garden app stores filled with pay-to-win, ad-filled games.
I was developing Flash since before it was called Flash, back when it was called FutureSplash Animator. I'm not talking about the IDE, I'm talking about the user experience that could be created with Flash.
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.
Apple killed flash by not allowing it to run on their mobile devices. It's really as simple as that.
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.
I always thought Flash died because Apple didn't want people to be able to write and execute arbitrary code in an app on their phones. That it posed a security risk, a stability risk, and potentially a business risk (as it could allow people to circumvent the limitations they'd imposed on, say, distribution and payments). Is that wrong?
Yes, it is wrong. Mostly. Or just some minor reason.
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
> 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.
I think the GP is talking more about the authoring tools for Flash. You could do everything - graphics, animation, audio, video, scripting - in a single package that was relatively easy to use.
It's crazy to me they didn't see the value in porting actionscript to something that compiles to JS/HTML5, though adobe couldn't be trusted to see this potential obviously. If they had something like that ready in ~2011 it could have completely replaced HTML 5 canvas adoption
I blame Adobe for Flash dying much more than Apple. There's a lot of features that would have been hard to port (maybe Flash Player could have evolved into providing support for those and being optional for simpler content), but an HTML5 output that worked for 90% of 2D games and animations would have kept it relevant. Or at least funding Shumway while it was around if no one at Adobe was able to do it.
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 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.
Fun story: Apple demoed the iPad to Hollywood execs a couple weeks before the release. The Hollywood folks saw all their web properties rendering almost no UI and their video content not available.
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.
And 10 years later I just don't see the level of amateur uptake that flash had.
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
I really think the all-in-one-ness of Flash is what made it so easy to use. Not only that you can make almost everything for a game/cartoon in one interface (IIRC audio wasn't included), but also that the output was a single file you could share easily.
The rampant piracy of old Flash versions probably helped a lot too.
I would bet there are many more young amateur animators and content creators now than there have been 10 years ago. Their work is just more diverse than the "signature Flash animation look".
> IMO, Flash died because it didn't play nice with the conventions of the web. There were workarounds, but generally it broke all of the things HTML could do, like being searchable & selectable, navigable with a keyboard, built of code you could inspect, addressable with a direct link, even working with the browser's back button.
Add to the list that when we resized the window or went fullscreen the typical Flash app would keep its original size. A Flash app born for 800x600 screens wouldn't look well in a 1366x768 screen or 1080p ones. It became tiny as resolution increased and diagonals more or less didn't. Then Steve Jobs and battery life or removing a competing ecosystem.
Not my experience outside of aspect ratio mis-matches. Flash content used a lot of vector art which scales fantastically. It not resizing is the developer's fault, not the technology's (which is common with Flash, it got blamed a lot for its misuse).
I know. I even built a Windows screensaver in Flash around 2000 but I don't remember the details. Anyway the web was littered by tiny and more tiny Flash apps that never filled the page beyond their originally assigned size. I guess that the customer never paid for the necessary updates or the dev was not available anymore. Customers eventually switched to HTML and JS.
There is a ton that flash did that CSS does not do, but it is more about the toolchain / dev environment for flash apps than the actual technical capabilities. It is very strange to me that no one has built "Flash but on Html5" yet.
There's a correlation between the death of Flash and the rise of mobile devices browsing. Flash was pixel-based and the whole paradigm doesn't really work for responsiveness.
Flash was just as responsive as HTML+CSS: As much as the developer makes it responsive.
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.
I was going to suggest Rive too. I came across them when I was trying to figure out how Duolingo's animations were done, pretty cool tool.
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.
Totally agree! The major feature missing compared to Flash would be library and component support - i.e. the ability to create reusable animated graphics that you can drag onto the canvas (with infinite nesting).
i.e. you can animate a bird with flapping wings, then drag 3 copies onto your sky.
There's actually quite a few new tools that do "animation for the web". I'm sure there's a longer list but the ones I've used are rive, jitter, fable, and lottielab. Rive is interesting but the one I find myself coming back to is lottielab, it feels the most like the "spend 4 minutes playing around, but now I have something that looks really cool" that I used to get when using flash
Adobe’s Flash editor got renamed to Adobe Animate. People mostly use it now to export video but there is more than one HTML 5 viewer it will export for, these support most of what Flash supported except for a few unusual geometric primitives.
Airbnb's Lottie has a Web Player now I think? Make your animation in AE or Figma, export to "Lottie JSON" with players in JS, Swift, Kotlin & React Native.
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 Flash player is gone, but the authoring software called Adobe Flash was just rebranded to Adobe Animate. Back in the Flash times Flash was quite popular for Western-style 2d animation, and a lot of TV series were produced in Flash. Animate has been keeping that somewhat alive, though better alternatives have emerged.
Yeah. For all the hate the Flash player got back in the day, the authoring software (which was Macromedia Flash when I last used it) was awesome. It has really nice motion interpolation (tweening) and onion-skinning tools. For Western animation this meant you didn’t need to outsource all the in-between work.
When was the last time you tried it? Because I had a similar experience, and a young animator told me that they were using this in a production envrioment now and I was shocked. Adobe Animate was hot garbage after Flash died, but I recently (like two weeks ago) sat down with it for a bit and I have to say it feels quite good. It seems like there was a time period where Adobe was focused on Animate exporting to canvas and they sort of abandoned that and just turned it into a tool that would export to video. It can do both, but really Animate now is just, "Adboe Illustrator but for animation." So it's not exactly a direct replacement, it's more like Flash without ActionScript, but with some tools to kind of point you in the right direction for canvas + js.
Oh, man. I just barely glanced at the features and the editor but - and I mean this in the best possible way - it looks like you've recreated Flash.
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!
It passed my first test: "Type hello world and make it bounce for 5 seconds."
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.
You can save to file ('export', to use Trangram's nomenclature) without creating an account. This includes Trangram's native .tg format, as well as animated GIF.
- 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.
Your suggestions are greatly appreciated. We're constantly looking for ways to enhance the user experience, and your input will definitely be taken into consideration.
Why compare Tangram to Adobe Illustrator when Adobe offers animation software in their suite? Adobe After Effects does motion graphics. Adobe Animate does animations for the web, or so I heard. How is Tangram closer to Illustrator than After Effects or Animate?
One quick comment: I was threatened and on the brink of being sued by one of Facebook's bigger law firms, because my domain was called "***gram.com" — I went through a couple of calls with them, and they confirmed that the only issue was the use of the word "gram". I tried to stick to my guns, knowing they had nothing (legally) on me, but eventually had to give in once they told me to research the ongoing cases they have with all the other domain owners (which you can all find online). Some of which have been going through lawyer-warfare for over three years (at the time). They basically said, if I have the power to sustain this, they would sue and we'll clear this in court, if I don't want to go through this, I should back off and use a different domain.
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.
Not that I don't believe what you're saying, but how is this a thing they could possibly expect to hold up as a trademark infringement? They literally own a single recently invented neologism of which neither the prefix nor the root is original. It seems to me that Instacart or Insta360 would be much more open to claims... honestly if it were me, I wouldn't hire a lawyer, just let them know to send me a letter what courthouse I should show up at with a dictionary.
> Not that I don't believe what you're saying, but how is this a thing they could possibly expect to hold up as a trademark infringement?
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.
This exactly... I would represent myself, it would be fun.... and let Meta spend hundreds of thousands on lawyers. If I lost I would drag it out as long as possible and then if by some strange twist of fate I lost, I would declare bankruptcy and write a book about the whole thing.
I know your comment is just internet puffery, but please know that the old adage is true: "A man who represents himself has a fool for a client."
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 have represented myself in court before... and won. I wouldn't recomend it for everyone, but in a relatively low stakes case, it is better in my opinion, for me, to represent myself than to not have my side heard at all because I can't afford a lawyer. Some folks don't enjoy legal stuff like I do, and it would not be worth yheir time.
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.
I don't remember what podcast I heard it from, but another opinion about representing yourself: it's more taxing on the judge. It consumes more court resources to represent yourself; which already is scarce. Which is why they often make sure you really want to do this.
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.
Maybe if it's that obnoxious to the state when people represent themselves, the state should provide advocates for civil cases where people can't afford a lawyer.
Telegram has probably sufficient money, so that threatening them into doing what FB/Meta wants does not work. They only go after small enough fish, preying on the weaker.
Not sure I want to post my domain but a bit of research will get you there if you want to confirm it. An Austrian news outlet wrote about the threat when I was involved.
We built a system where the big players don't care if they are in the right.
The massive investments necessary to uphold the rights in front of court are what makes it possible for Meta to get through with this BS.
I am not sure if this is a problem that mainly manifests in the USA. I haven't heard of private parties or small companies shying back of a court case when they believe they are in the right in Europe.
Big companies can afford to - the point is not that Meta would win a case, it's that most people are too small to survive a case long enough to see it through to a win against Meta.
Only goes to show once more how despicable FB/Meta as an entity is and acts.
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.
Wow. Adobe did such a great job destroying Flash that people be out there creating whole "Adobe Illustrator but for animation" software when Adobe already makes Adobe Illustrator but for animation.
This is awesome. Great job! I love the simplicity of the whole thing. I was able to figure out the tool in a minute. Compare that to professional software, which can have a scary complexity. I think it'd be a great educational tool. Kids would love to experiment with it.
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
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.
Good luck on your mission! As a kid/teenager who grew up creating animations and games on Flash (from v2 to v5) I've always felt that since then only the people really into animation have been able to play with it, the tools are not approachable, you need to learn a lot before you can do the basics which were quite straightforward with Flash.
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 :)
We're committed to creating tutorials in the future when we have the capacity to do so. In the meantime, I encourage and welcome anyone who enjoys sharing their knowledge from using Trangram to create videos for others to learn from.
By safety, I means a safe environment for users especially children to browse and learn content shared on Trangram, as well as security aspects including authentication, authorization and data privacy.
Just wanted to give a feature suggestion of adding a way to start the animator from existing designs. Kind of "fork" or "remix" for existing ones, opening the editor with the existing design pre-loaded. I think that would be incredible network power and cool to learn the tool.
Very nice. One question: I see the submission mentions SVG animation but I don't see any way of exporting as SVG. Did I miss something, or was this just meant as a plan for the future?
At the moment, Trangram does not support exporting SVG animation files.
By svg animation, I means Trangram internally handle all shapes as svg objects, just as you can edit the path data under geometry section and Trangram supports basic svg file import.
Opening the website with Firefox 123.0.1 on Windows 10 x64, the webpage slowed my browser to a crawl. After a quick look into it, it seems it didn't play well with the Angular Devtools extension[1]; you might want to look into it.
Please consider adding `overscroll-behavior: contain;` to the <body> or whatever wrapper causes my browser to scroll/drag outside of the viewport when zooming in or out the preview.
Looks good, although I'm a little bit sad about this web application trend.
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.
I agree, this is also going to get much worse. I recently dipped back into some of the younger SaaS communities (Twitter is particularly crazy) and it's just madness. They make something, (ab)use anything they can find to push this in front of people and promote it, and if it doesn't throw cash within the minute, it will be left for dead. I'd even argue that some of these tools have a lifetime of a month or less. With AI, this is typically the moment when they run out of their first OpenAI top up and start to abandon.
I understand your concern. There're always some trade-off over there. Taking Trangram implementation for example, I have to choose among different front-end frameworks considering all the strength and weakness, features and performance, documentation and community activeness; Creating new features and functionalities from scratch or use existing 3rd-party libs which is usually heavyweight in file size and may probably cause compatibility issues in the future; Determining which cloud servers to host Trangram so as to balance the performance and the cost. etc... And in terms of web apps vs native apps, we have to balance things like compatibility and maintainability.
Anyway, I will try my best to make Trangram sustainable and bring values to everyone by creating and sharing creative contents.
A good SVG animation tool is dearly missing. I wish Inkscape could do it or there was an Inkscape-like animation tool, that does not hide but rather embraces the underlying SVG code.
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?
> I wish Inkscape could do it or there was an Inkscape-like animation tool, that does not hide but rather embraces the underlying SVG code.
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
Recently I was trying to create lightweight SVG images for an embedded project and was looking for exactly this type of thing. I ended up drawing them in Inkscape and then opening in a text editor to strip out everything that wasn't necessary, and round every coordinate to the nearest integer. I was using Ristretto next to the text editor to see the changes and was kind of wishing it could go the other way as well, maybe as a plugin for Geany or something.
I’ve not looked at the tool, but are animations driven by CSS, and if so do you embed the CSS into the SVG?
Where I work we’re looking at SVG animation tools for some graphics and the majority appear to be lottie-like tools dependent on JavaScript and other plugins which we can’t use.
SVGator[1] offers CSS or JS for animation export (no SMIL or hybrid it seems). I haven't used it but it came up in a prior HN discussion. Due to the traditional dearth of authoring tools I'm used to creating self-contained SVG animations manually via a text editor, by translating raster mockups, but glad there's at least one GUI authoring tool that considers such use cases.
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?
Quickly checking through the JS being served to the site, it looks like the project is using Paper.js[1] for its foundational canvas library. As PaperJS is a 2D canvas library, I doubt the project is using any WebGL magic for its functionality. I could, of course, be very wrong!
> 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!
To be honest, depending on how many tools/features you want to add, that would be a very big project for a solo developer.
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.
For any non-trivial editor you will need an object model that abstracts away the low level drawing functions and manages state.
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
- 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.
Well done for shipping! I'm really impressed by the tool - it's intuitive and like a very light-weight After Effects.
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).
Thank you for your kind words and feedback! We're constantly looking for ways to enhance the user experience, and your input will definitely be taken into consideration.
This looks really well done! I was able to create a simple animation easily even though I don't know anything about animation software.
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.
Excellent job! I recently fired up the latest version of Adobe flash and found myself entirely unable to remember how to even do a simple keyframe animation, your editor manages to let me do that intuitively!
I'm definitely going to have a closer look at this in the future!
Trangram indeed supports basic SVG import as well as importing Trangram files (tg). To import, simply navigate to the "Import" option under the main menu (Trangram logo) in the editor.
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!
I love this! I was hit with a wave of nostalgia. I used to spend hours and hours making flash animations. This tool is super intuitive :D I haven't touched an animation tool since I was like 11 years old, and it just works.
Slightly off topic: What are the tools for making animations in the webpage, in html/canvas format not embedded videos? Sometimes I see some sites with nifty animations that animate while scrolling too and I wonder how it’s done.
I googled that right and partially yes, but not necessarily, sometimes I see good animation without the scrolling part, some were built with three.js but others were not, would be interesting to know the tools.
Just tried it on my mobile, responsive and well designed. I like how neat and uncluttered the site is. The editor feels intuitive and easy to use. Like the demos on the homepage. This must have been a massive project very impressive!!
Thank you so much for your kind words. Making the editor intuitive and easy to use was a top priority, so I'm glad to you love it. Indeed, it was quite a massive project, but feedback like yours makes it all worthwhile.
When on the "My Designs" list, if you choose the vertical three dots way on the right, Delete is spelled Detele. Other than that, well even with that, you've come up with an amazing app!!
Played with it for a couple of minutes, amazing work!
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)
what i miss from my childhood days is the far simpler program fantavision, which produces pretty crude results by today's standards, but which also had a very small learning curve and really let beginners experiment with the basics of vector animation. i've often wondered why there is no good analogue today.
Thank you for your kind words! I'm continuously striving to improve Trangram. Currently, I'm focusing on enhancing existing features and ensuring a smoother user experience overall. Rest assured, I'll continue to add new features to Trangram in the future, as stated on the https://www.trangram.com/about page.
Thank you! Well, it's hard to say, because the first version of Trangram differed significantly from what you see now. Additionally, I've been involved in various projects over the years.
I'm not familiar with Macromedia Director. So I did a quick search and find that both tools can do a basic positions, scale, rotation and color animation just by creating shapes and keyframes within few clicks and draggings.
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.
Well, the power of Macromedia Director was not those animations — but, a scripting language called Lingo[1]. In 1999, I did a trial Kiosk for the State Bank of India[2] to be installed at a popular landmark in Bombay, called the Wockhardt Hospitals[3].
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.
This is super cool and was very easy to get going. Missing keyboard shortcuts is pretty annoying and would make this even simpler. I hopped in hoping it was like a Google Drawing, which it's pretty close, but the lack of keyboard shortcuts for copying/pasting, selecting all, etc -- makes it hard to move fast.
The Trangram editor offers keyboard shortcuts for many basic operations such as copy, paste, select all, zoom in/out, and more. However, at present, keyboard shortcuts for activating specific shape tools are not available. This decision stems from the challenge of finding a key combination that strikes a balance between being widely recognized and easy to remember. You know there're only 26 letters and it's easy to get conflict and confused with others.
It is already widely supported by all the major browsers except Chromium that powers Google Chrome and Microsoft Edge. And the lame excuse they give for that is "Chromium has actually decided to discontinue JPEG XL support, citing a lack of interest in the format." So if you wait for Google (and Microsoft) to support JPEG-XL, you will be stuck in a kind of "chicken and egg" paradox, where you wait for Chromium to support JPEG-XL and Google waits for developers like you to implement it in your apps.
Glad to hear that you found the tool wonderful and that your kids enjoyed it too! It's always great when something simple brings joy and utility to both adults and children alike.
"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:
Yeah, me too. Why, just why didn't Adobe open source (and vastly improve in terms of security) the flash player and rather let it die. It was such an awesome ecosystem.
Hi dai! It's great that you were able to create and publish your work so quickly. If you feel more comfortable keeping it unlisted, that's absolutely fine. The most important thing is that you're happy with your creation. If you ever decide to share it publicly in the future, you can always do so later on.
That's something we could explore down the line. Before integrating it, we'd need to assess how it aligns with Trangram's current animation workflow. We aim to maintain a streamlined process and avoid encouraging methods akin to making a flipbook.
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!