17 ms·

Show HN: I made a free animator. Think Adobe Illustrator but for animation

738 points by trangram 3y ago

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.

5- 3y ago
very nice! unless i'm missing something, you don't support export to any vector and/or animated formats besides your own?
- asteroidz 3y ago
  Certainly a bit disappointing that Lottie or SVG format export doesn't exist. Hopefully a work in progress?
KingOfCoders 3y ago
Like Macromedia Director? I remember creating tcp ip network flow animations with that one.
- mahomedalid 3y ago
  I came here to say the exact same thing, it remind me to Macromedia Flash animations.
  - HanClinto 3y ago
    Yes, very much reminds me of that -- this looks great!
  - seabrookmx 3y ago
    It still exists. Macromedia Flash became Adobe Flash became Adobe Animate: https://www.adobe.com/ca/products/animate.html https://www.adobe.com/ca/products/animate.html Nice to see some free alternatives popping up.
- trangram 3y ago
  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. https://www.trangram.com/about https://www.trangram.com/about Thanks so much for your comment and letting me know about Macromedia Director.
  - Brajeshwar 3y ago
    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. 1. https://en.wikipedia.org/wiki/Lingo_(programming_language) https://en.wikipedia.org/wiki/Lingo_(programming_language) 2. https://en.wikipedia.org/wiki/State_Bank_of_India https://en.wikipedia.org/wiki/State_Bank_of_India 3. https://en.wikipedia.org/wiki/Wockhardt_Hospitals https://en.wikipedia.org/wiki/Wockhardt_Hospitals
shubhamjain 3y ago
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.
- trangram 3y ago
  Your words mean a lot to me. 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=PLOxODW9vlVLRpXYW1iMEjMJ0Xy2F0d4Q_&index=1 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.
  - piva00 3y ago
    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 :)
    - trangram 3y ago
      Thank you so much for your support and kind words! With support like yours, we're optimistic about the future and excited to see where Trangram goes.
HanClinto 3y ago
Really impressive work!! Ever since the demise of Flash I've felt a strong lack of such animation tools. Very nicely done!
- trangram 3y ago
  Thank you for the kind words. I hope you guys will find it useful.
JSavageOne 3y ago
This looks awesome. 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.
- trangram 3y ago
  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.
barlog 3y ago
what an awesome. 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
- trangram 3y ago
  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.
junto 3y ago
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. Great job!
- ramraj07 3y ago
  Isn’t adobe animate just flash ?
  - lukan 3y ago
    No, since flash is no longer around. 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.
    - eloeffler 3y ago
      There is also ruffle which seems to be doing a very good job at reviving Flash animations. 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-archive-preservation-flash-animations-games-adobe https://www.theverge.com/2020/11/19/21578616/internet-archiv...
    - wongarsu 3y ago
      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.
      - chongli 3y ago
        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.
quaestio 3y ago
It would be cool to be able to use the middle mouse button to pan and zoom the canvas, like most CAD software allows. Can the units of the artboard be set - for example to mm?
justinclift 3y ago
Just opened the editor, switched to line mode, and drew a line. 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? :)
- lukan 3y ago
  "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/ https://www.wickeditor.com/ (but developement is on hold)
  - justinclift 3y ago
    Yeah. Not being FOSS is a blocker from my point of view as well. Already been through that exercise with Adobe and the Flash ecosystem. No interest at all in a repeat.
    - lukan 3y ago
      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.
    - rekado 3y ago
      Here is a free software animator: https://www.synfig.org/ https://www.synfig.org/ 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.
dkarras 3y ago
This is cool, and "Adobe Illustrator for animation" is perhaps Adobe After Effects.
- ramraj07 3y ago
  No, it’s adobe flash or whatever the hell they call it nowadays.
t09i209ba893 3y ago
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?
- trangram 3y ago
  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.
exodust 3y ago
All the examples say "post unavailable" for me in Firefox desktop. (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 https://www.trangram.com/post/65bdd64d51a9f658905fa662
- trangram 3y ago
  Glad that you solve it. Trangram requires modern browsers which support web apis such as stream and crypto api to work properly.
maxiwer 3y ago
I'm elated that you used Angular. Because I've been b*tching about no one uses it :D
scosman 3y ago
Opened it, made an animation in 10 seconds. On mobile. With zero experience with animation software. Well done Any chance of Lottie export? I think I would use this if there was.
- gerroo 3y ago
  Yes! That's what I was thinking.
- alistairthomson 3y ago
  For lottie export there's: https://www.lottielab.com https://www.lottielab.com
deleted 3y ago
[deleted]
begueradj 3y ago
Great work
- trangram 3y ago
  Thank you
abmmgb 3y ago
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!!
- trangram 3y ago
  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.
tupolef 3y ago
Great job! 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.
- trangram 3y ago
  I'm delighted to hear that you found the tool helpful.
santiagobasulto 3y ago
This is great. I have actually written about how this is a great opportunity: an "excalidraw for animations". 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?
- trangram 3y ago
  Thanks for you suggestions. The landing page is still under development and may be updated any time in the future.
wfme 3y ago
Looks great and works well. 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.
- trangram 3y ago
  You mean something like a cheat sheet to show all the shortcut keys?
  - wfme 3y ago
    A cheat sheet would be useful too! But I mean shortcuts for frequently used actions like copy/paste and delete.
verdverm 3y ago
Is audio possible, and if not, plans for it?
- trangram 3y ago
  Audio functionality is not currently on the roadmap. Our primary focus is ensuring the sustainability and user-friendliness of Trangram.
self_awareness 3y ago
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.
- deleted 3y ago
  [deleted]
- mittermayr 3y ago
  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.
- trangram 3y ago
  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.
meekaaku 3y ago
Looks very nice. Is this on webgl? 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 https://eloquentjavascript.net/19_paint.html
- jonwinstanley 3y ago
  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.
  - meekaaku 3y ago
    I am not necessarily looking to build something production. Just want to learn. Any pointers?
- jarek-foksa 3y ago
  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 https://github.com/fabricjs/fabric.js/tree/master
- dceddia 3y ago
  tldraw could be a good example to look at. It’s an open source infinite canvas drawing app: https://github.com/tldraw/tldraw https://github.com/tldraw/tldraw The live version is at https://tldraw.com https://tldraw.com
jimmar 3y ago
Very cool! It's a great balance of power and simplicity.
- trangram 3y ago
  Thank you!
neurostimulant 3y ago
This is great! If you add lottie export, I could see this tool become popular among web and mobile app devs.
- trangram 3y ago
  Thanks. Your feedback is valuable and will be taken into account as we continue to improve the tool.
kylegalbraith 3y ago
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.
- cududa 3y ago
  This is a ridiculously complex application dude. I’m sure they’ll get to keyboard shortcuts when they get to it
  - trangram 3y ago
    Thanks! Appreciate your understanding.
- trangram 3y ago
  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.
tamimio 3y ago
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.
- imp0cat 3y ago
  Do you mean scrolljacking?
  - tamimio 3y ago
    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.
est 3y ago
need a free drawing tool instead of pen/line
- trangram 3y ago
  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.
weinzierl 3y ago
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?
- jarek-foksa 3y ago
  > 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 https://boxy-svg.com/blog/21
  - exceptione 3y ago
    Doesn't work on Firefox unfortunately.
- drewzero1 3y ago
  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.
Mackser 3y ago
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. Best of luck with the project!
- trangram 3y ago
  Thanks for your suggestions. The feature demos were a labor of love, and it's wonderful to know they're appreciated.
mittermayr 3y ago
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. Looks great though!
- notsahil 3y ago
  Any reference to it? I couldn't find anything about Facebook taking action on a domain ending with gram. Was your domain similar to instagram? Because telegram is still out there.
  - Chazprime 3y ago
    This is one of them that I remember from 2016: https://www.theguardian.com/media-network/2016/dec/02/battle-brands-six-epic-fights-over-trademark-names 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.
    - panzagl 3y ago
      Deep in Meta HQ: "How dare the metric system infringe on our IP"
  - zelphirkalt 3y ago
    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.
illwrks 3y ago
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.
- jarek-foksa 3y ago
  For pure SVG-based animations you should take a look at Boxy SVG: https://boxy-svg.com/blog/21 https://boxy-svg.com/blog/21
  - deleted 3y ago
    [deleted]
- tgv 3y ago
  It doesn't sound like CSS. The fans on my laptop came on after opening a simple animation (the Pythagorean proof). Firefox was at 100%.
- Springtime 3y ago
  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. [1] https://www.svgator.com/help/getting-started/js-animations-vs-css-animations https://www.svgator.com/help/getting-started/js-animations-v...
- trangram 3y ago
  Thank you for your interest! At the moment, Trangram does not support exporting SVG animation files.
lukko 3y ago
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 https://www.iorama.studio/looom).
- trangram 3y ago
  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.
jzemeocala 3y ago
OMG, I love this SOoooo much. Reminds me of a 90s era onion skin animation program I've been trying to find forever. SAVED
jzellis 3y ago
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!
thisislife2 3y ago
Disappointed that this is a web application. But great work. The user interface is very intuitive and easy to use. Feature request: Add 'Export to JPEG-XL' option (JPEGXL - https://jpegxl.info/why-jxl.html https://jpegxl.info/why-jxl.html . See also - FFmpeg Adds Support for Animated JPEG-XL - https://news.ycombinator.com/item?id=36243889 https://news.ycombinator.com/item?id=36243889 ).
- trangram 3y ago
  Thanks for your feedback. We'll definitely keep that in mind as JPEG-XL becomes more widely supported across modern browsers.
  - thisislife2 3y ago
    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.
MyFedora 3y ago
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?
lazylion2 3y ago
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)
- trangram 3y ago
  Need further info, your browser version and os?
brontosaurusrex 3y ago
There is a typo in font style section: Blod italic (should be Bold).
- trangram 3y ago
  I appreciate your keen eye for detail. Will correct it later.
vasco 3y ago
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.
javier_e06 3y ago
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.
- wizzwizz4 3y ago
  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.
  - javier_e06 3y ago
    Ah, yes! Thank you!. The export works like a charm. It let me select multiple formats.
latexr 3y ago
> Think Adobe Illustrator but for animation That makes me think of Flash.
taink 3y ago
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. Interesting tool nonetheless! [1] https://addons.mozilla.org/fr/firefox/addon/angular-devtools https://addons.mozilla.org/fr/firefox/addon/angular-devtools
- trangram 3y ago
  Thanks for the feedback. Will investigate it.
WillAdams 3y ago
Some things I'm not seeing: - 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)
mellutussa 3y ago
Nice! Feature idea: let me open the demos in the editor.
_0j9w 3y ago
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. https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-...
- anticensor 3y ago
  That inhibits pull-to-refresh in mobile phones.
interestica 3y ago
Do you have svg output examples?
- trangram 3y ago
  Currently, Trangram doesn't support exporting SVG animation files. While static SVG export is planned, it's not yet available.
  - interestica 3y ago
    Ah, your description mentions svg animations.
kookamamie 3y ago
Looks very good (instant Flash erhm flashbacks) but jesus christ how to add more key points to the timeline?
deleted 3y ago
[deleted]
forsakenharmony 3y ago
Wish the animations were playing in 60 or even better, my native refresh rate. They look super choppy using firefox on macos
kraig911 3y ago
I like it but is there a pen Bezier tool? It'd be perfect with that feature.
- trangram 3y ago
  Certainly, we do have a Pen Bezier tool available. When you switch to path mode, the first one is what you want.
mahesh_rm 3y ago
This is amazing. I was able to open it and start creating animations! Thank you for this contribution!
- trangram 3y ago
  Thank you and enjoy your animating.
srameshc 3y ago
This is wonderful. I love the simplicity of this tool and my kids loved it.
- trangram 3y ago
  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.
kokalesi 3y ago
This brings tears in my eyes... thank you <3
- trangram 3y ago
  Thank you!!
mettamage 3y ago
I wonder why nothing like this ever became big again after Flash.
theferalrobot 3y ago
I love this, I drew a triangle, clicked somewhere else on the timeline moved the triangle and it worked. So intuitive, just how it should be.
- trangram 3y ago
  Glad you found it intuitive! Keep creating!
i_am_a_squirrel 3y ago
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.
- trangram 3y ago
  I'm delighted that Trangram brought back those memories for you. Hope you are enjoying creating and sharing your designs. Happy animating!
themagician 3y ago
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. Honestly, that's incredible.
happytiger 3y ago
This looks like a free version of https://rive.app/ https://rive.app/ (also free). What would you say differentiates it? And why would I pick yours over rive long term?
hellorashid 3y ago
whoa this is seriously impressive!
- trangram 3y ago
  Thanks a lot!
RespectYourself 3y ago
[dead]
alertuser 3y ago
Flash was dangerous because it ran a VM and had low-level access for storage and graphics. So it was always fighting against exploits that ruined its features.
zem 3y ago
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.
watersb 3y ago
Mac app for web animation: Tumult Hype https://tumult.com/hype/ https://tumult.com/hype/ Resulting animation can be self-hosted on a web page. macOS-only, I believe.
stevels 3y ago
Very impressive. I love it. How are you going to evolve it? Would you mind sharing your plan?
- trangram 3y ago
  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 https://www.trangram.com/about page.
dusted 3y ago
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 3y ago
  Thank you! Delighted to hear that you find Trangram intuitive. Looking forward to having you explore it further in the future!
T3RMINATED 3y ago
[dead]
fredguth 3y ago
Animator was the name of the first animation software I used in 94.
hank1931 3y ago
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!!
- trangram 3y ago
  Oh, this is a creative one, I don't even know how I did that. Thank you for letting me know.
geenat 3y ago
Flash is back, baby
rpuiu 3y ago
This is super cool, gret job! How long did it take for you to reach this version?
- trangram 3y ago
  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.
albert_e 3y ago
This is wonderful. I hope you are able to make this a full product. Suggestion: - import SVGs? - create custom shapes and groups and add them to a "library" so you can reuse them across projects?
- trangram 3y ago
  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!
  - trangram 3y ago
    In addition to exporting/importing tg files, logged-in users can easily reuse their existing designs by directly importing them from "My Designs".
raobit 3y ago
hey hey!! the tool is really cool. What tech stack did you used to develop this?? I also see you have disabled inspect chrome tab, why that so?

738 points by trangram 3y ago

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.

5- 3y ago

very nice! unless i'm missing something, you don't support export to any vector and/or animated formats besides your own?

asteroidz 3y ago
Certainly a bit disappointing that Lottie or SVG format export doesn't exist. Hopefully a work in progress?

KingOfCoders 3y ago

Like Macromedia Director? I remember creating tcp ip network flow animations with that one.

mahomedalid 3y ago
I came here to say the exact same thing, it remind me to Macromedia Flash animations.
- HanClinto 3y ago
  Yes, very much reminds me of that -- this looks great!
- seabrookmx 3y ago
  It still exists. Macromedia Flash became Adobe Flash became Adobe Animate: https://www.adobe.com/ca/products/animate.html https://www.adobe.com/ca/products/animate.html Nice to see some free alternatives popping up.
trangram 3y ago
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. https://www.trangram.com/about https://www.trangram.com/about Thanks so much for your comment and letting me know about Macromedia Director.
- Brajeshwar 3y ago
  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. 1. https://en.wikipedia.org/wiki/Lingo_(programming_language) https://en.wikipedia.org/wiki/Lingo_(programming_language) 2. https://en.wikipedia.org/wiki/State_Bank_of_India https://en.wikipedia.org/wiki/State_Bank_of_India 3. https://en.wikipedia.org/wiki/Wockhardt_Hospitals https://en.wikipedia.org/wiki/Wockhardt_Hospitals

shubhamjain 3y ago

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.

trangram 3y ago
Your words mean a lot to me. 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=PLOxODW9vlVLRpXYW1iMEjMJ0Xy2F0d4Q_&index=1 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.
- piva00 3y ago
  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 :)
  - trangram 3y ago
    Thank you so much for your support and kind words! With support like yours, we're optimistic about the future and excited to see where Trangram goes.

HanClinto 3y ago

Really impressive work!! Ever since the demise of Flash I've felt a strong lack of such animation tools. Very nicely done!

trangram 3y ago
Thank you for the kind words. I hope you guys will find it useful.

JSavageOne 3y ago

This looks awesome. 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.

trangram 3y ago
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.

barlog 3y ago

what an awesome. 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

trangram 3y ago
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.

junto 3y ago

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. Great job!

ramraj07 3y ago
Isn’t adobe animate just flash ?
- lukan 3y ago
  No, since flash is no longer around. 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.
  - eloeffler 3y ago
    There is also ruffle which seems to be doing a very good job at reviving Flash animations. 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-archive-preservation-flash-animations-games-adobe https://www.theverge.com/2020/11/19/21578616/internet-archiv...
  - wongarsu 3y ago
    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.
    - chongli 3y ago
      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.

quaestio 3y ago

It would be cool to be able to use the middle mouse button to pan and zoom the canvas, like most CAD software allows. Can the units of the artboard be set - for example to mm?

justinclift 3y ago

Just opened the editor, switched to line mode, and drew a line. 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? :)

lukan 3y ago
"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/ https://www.wickeditor.com/ (but developement is on hold)
- justinclift 3y ago
  Yeah. Not being FOSS is a blocker from my point of view as well. Already been through that exercise with Adobe and the Flash ecosystem. No interest at all in a repeat.
  - lukan 3y ago
    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.
  - rekado 3y ago
    Here is a free software animator: https://www.synfig.org/ https://www.synfig.org/ 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.

dkarras 3y ago

This is cool, and "Adobe Illustrator for animation" is perhaps Adobe After Effects.

ramraj07 3y ago
No, it’s adobe flash or whatever the hell they call it nowadays.

t09i209ba893 3y ago

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?

trangram 3y ago
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.

exodust 3y ago

All the examples say "post unavailable" for me in Firefox desktop. (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 https://www.trangram.com/post/65bdd64d51a9f658905fa662

trangram 3y ago
Glad that you solve it. Trangram requires modern browsers which support web apis such as stream and crypto api to work properly.

maxiwer 3y ago

I'm elated that you used Angular. Because I've been b*tching about no one uses it :D

scosman 3y ago

Opened it, made an animation in 10 seconds. On mobile. With zero experience with animation software. Well done Any chance of Lottie export? I think I would use this if there was.

gerroo 3y ago
Yes! That's what I was thinking.
alistairthomson 3y ago
For lottie export there's: https://www.lottielab.com https://www.lottielab.com

deleted 3y ago

[deleted]

begueradj 3y ago

Great work

trangram 3y ago
Thank you

abmmgb 3y ago

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!!

trangram 3y ago
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.

tupolef 3y ago

Great job! 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.

trangram 3y ago
I'm delighted to hear that you found the tool helpful.

santiagobasulto 3y ago

This is great. I have actually written about how this is a great opportunity: an "excalidraw for animations". 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?

trangram 3y ago
Thanks for you suggestions. The landing page is still under development and may be updated any time in the future.

wfme 3y ago

Looks great and works well. 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.

trangram 3y ago
You mean something like a cheat sheet to show all the shortcut keys?
- wfme 3y ago
  A cheat sheet would be useful too! But I mean shortcuts for frequently used actions like copy/paste and delete.

verdverm 3y ago

Is audio possible, and if not, plans for it?

trangram 3y ago
Audio functionality is not currently on the roadmap. Our primary focus is ensuring the sustainability and user-friendliness of Trangram.

self_awareness 3y ago

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.

deleted 3y ago
[deleted]
mittermayr 3y ago
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.
trangram 3y ago
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.

meekaaku 3y ago

Looks very nice. Is this on webgl? 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 https://eloquentjavascript.net/19_paint.html

jonwinstanley 3y ago
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.
- meekaaku 3y ago
  I am not necessarily looking to build something production. Just want to learn. Any pointers?
jarek-foksa 3y ago
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 https://github.com/fabricjs/fabric.js/tree/master
dceddia 3y ago
tldraw could be a good example to look at. It’s an open source infinite canvas drawing app: https://github.com/tldraw/tldraw https://github.com/tldraw/tldraw The live version is at https://tldraw.com https://tldraw.com

jimmar 3y ago

Very cool! It's a great balance of power and simplicity.

trangram 3y ago
Thank you!

neurostimulant 3y ago

This is great! If you add lottie export, I could see this tool become popular among web and mobile app devs.

trangram 3y ago
Thanks. Your feedback is valuable and will be taken into account as we continue to improve the tool.

kylegalbraith 3y ago

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.

cududa 3y ago
This is a ridiculously complex application dude. I’m sure they’ll get to keyboard shortcuts when they get to it
- trangram 3y ago
  Thanks! Appreciate your understanding.
trangram 3y ago
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.

tamimio 3y ago

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.

imp0cat 3y ago
Do you mean scrolljacking?
- tamimio 3y ago
  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.

est 3y ago

need a free drawing tool instead of pen/line

trangram 3y ago
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.

weinzierl 3y ago

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?

jarek-foksa 3y ago
> 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 https://boxy-svg.com/blog/21
- exceptione 3y ago
  Doesn't work on Firefox unfortunately.
drewzero1 3y ago
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.

Mackser 3y ago

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. Best of luck with the project!

trangram 3y ago
Thanks for your suggestions. The feature demos were a labor of love, and it's wonderful to know they're appreciated.

mittermayr 3y ago

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. Looks great though!

notsahil 3y ago
Any reference to it? I couldn't find anything about Facebook taking action on a domain ending with gram. Was your domain similar to instagram? Because telegram is still out there.
- Chazprime 3y ago
  This is one of them that I remember from 2016: https://www.theguardian.com/media-network/2016/dec/02/battle-brands-six-epic-fights-over-trademark-names 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.
  - panzagl 3y ago
    Deep in Meta HQ: "How dare the metric system infringe on our IP"
- zelphirkalt 3y ago
  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.

illwrks 3y ago

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.

jarek-foksa 3y ago
For pure SVG-based animations you should take a look at Boxy SVG: https://boxy-svg.com/blog/21 https://boxy-svg.com/blog/21
- deleted 3y ago
  [deleted]
tgv 3y ago
It doesn't sound like CSS. The fans on my laptop came on after opening a simple animation (the Pythagorean proof). Firefox was at 100%.
Springtime 3y ago
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. [1] https://www.svgator.com/help/getting-started/js-animations-vs-css-animations https://www.svgator.com/help/getting-started/js-animations-v...
trangram 3y ago
Thank you for your interest! At the moment, Trangram does not support exporting SVG animation files.

lukko 3y ago

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 https://www.iorama.studio/looom).

trangram 3y ago
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.

jzemeocala 3y ago

OMG, I love this SOoooo much. Reminds me of a 90s era onion skin animation program I've been trying to find forever. SAVED

jzellis 3y ago

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!

thisislife2 3y ago

Disappointed that this is a web application. But great work. The user interface is very intuitive and easy to use. Feature request: Add 'Export to JPEG-XL' option (JPEGXL - https://jpegxl.info/why-jxl.html https://jpegxl.info/why-jxl.html . See also - FFmpeg Adds Support for Animated JPEG-XL - https://news.ycombinator.com/item?id=36243889 https://news.ycombinator.com/item?id=36243889 ).

trangram 3y ago
Thanks for your feedback. We'll definitely keep that in mind as JPEG-XL becomes more widely supported across modern browsers.
- thisislife2 3y ago
  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.

MyFedora 3y ago

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?

lazylion2 3y ago

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)

trangram 3y ago
Need further info, your browser version and os?

brontosaurusrex 3y ago

There is a typo in font style section: Blod italic (should be Bold).

trangram 3y ago
I appreciate your keen eye for detail. Will correct it later.

vasco 3y ago

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.

javier_e06 3y ago

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.

wizzwizz4 3y ago
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.
- javier_e06 3y ago
  Ah, yes! Thank you!. The export works like a charm. It let me select multiple formats.

latexr 3y ago

> Think Adobe Illustrator but for animation That makes me think of Flash.

taink 3y ago

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. Interesting tool nonetheless! [1] https://addons.mozilla.org/fr/firefox/addon/angular-devtools https://addons.mozilla.org/fr/firefox/addon/angular-devtools

trangram 3y ago
Thanks for the feedback. Will investigate it.

WillAdams 3y ago

Some things I'm not seeing: - 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)

mellutussa 3y ago

Nice! Feature idea: let me open the demos in the editor.

_0j9w 3y ago

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. https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-...

anticensor 3y ago
That inhibits pull-to-refresh in mobile phones.

interestica 3y ago

Do you have svg output examples?

trangram 3y ago
Currently, Trangram doesn't support exporting SVG animation files. While static SVG export is planned, it's not yet available.
- interestica 3y ago
  Ah, your description mentions svg animations.

kookamamie 3y ago

Looks very good (instant Flash erhm flashbacks) but jesus christ how to add more key points to the timeline?

deleted 3y ago

[deleted]

forsakenharmony 3y ago

Wish the animations were playing in 60 or even better, my native refresh rate. They look super choppy using firefox on macos

kraig911 3y ago

I like it but is there a pen Bezier tool? It'd be perfect with that feature.

trangram 3y ago
Certainly, we do have a Pen Bezier tool available. When you switch to path mode, the first one is what you want.

mahesh_rm 3y ago

This is amazing. I was able to open it and start creating animations! Thank you for this contribution!

trangram 3y ago
Thank you and enjoy your animating.

srameshc 3y ago

This is wonderful. I love the simplicity of this tool and my kids loved it.

trangram 3y ago
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.

kokalesi 3y ago

This brings tears in my eyes... thank you <3

trangram 3y ago
Thank you!!

mettamage 3y ago

I wonder why nothing like this ever became big again after Flash.

theferalrobot 3y ago

I love this, I drew a triangle, clicked somewhere else on the timeline moved the triangle and it worked. So intuitive, just how it should be.

trangram 3y ago
Glad you found it intuitive! Keep creating!

i_am_a_squirrel 3y ago

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.

trangram 3y ago
I'm delighted that Trangram brought back those memories for you. Hope you are enjoying creating and sharing your designs. Happy animating!

themagician 3y ago

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. Honestly, that's incredible.

happytiger 3y ago

This looks like a free version of https://rive.app/ https://rive.app/ (also free). What would you say differentiates it? And why would I pick yours over rive long term?

hellorashid 3y ago

whoa this is seriously impressive!

trangram 3y ago
Thanks a lot!

RespectYourself 3y ago

[dead]

alertuser 3y ago

Flash was dangerous because it ran a VM and had low-level access for storage and graphics. So it was always fighting against exploits that ruined its features.

zem 3y ago

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.

watersb 3y ago

Mac app for web animation: Tumult Hype https://tumult.com/hype/ https://tumult.com/hype/ Resulting animation can be self-hosted on a web page. macOS-only, I believe.

stevels 3y ago

Very impressive. I love it. How are you going to evolve it? Would you mind sharing your plan?

trangram 3y ago
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 https://www.trangram.com/about page.

dusted 3y ago

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 3y ago
Thank you! Delighted to hear that you find Trangram intuitive. Looking forward to having you explore it further in the future!

T3RMINATED 3y ago

[dead]

fredguth 3y ago

Animator was the name of the first animation software I used in 94.

hank1931 3y ago

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!!

trangram 3y ago
Oh, this is a creative one, I don't even know how I did that. Thank you for letting me know.

geenat 3y ago

Flash is back, baby

rpuiu 3y ago

This is super cool, gret job! How long did it take for you to reach this version?

trangram 3y ago
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.

albert_e 3y ago

This is wonderful. I hope you are able to make this a full product. Suggestion: - import SVGs? - create custom shapes and groups and add them to a "library" so you can reuse them across projects?

trangram 3y ago
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!
- trangram 3y ago
  In addition to exporting/importing tg files, logged-in users can easily reuse their existing designs by directly importing them from "My Designs".

raobit 3y ago

hey hey!! the tool is really cool. What tech stack did you used to develop this?? I also see you have disabled inspect chrome tab, why that so?