[HN Gopher] Show HN: I made a free animator. Think Adobe Illustr...
___________________________________________________________________
Show HN: I made a free animator. Think Adobe Illustrator but for
animation
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.
Author : trangram
Score : 582 points
Date : 2024-03-12 03:15 UTC (19 hours ago)
(HTM) web link (www.trangram.com)
(TXT) w3m dump (www.trangram.com)
| KingOfCoders wrote:
| Like Macromedia Director? I remember creating tcp ip network flow
| animations with that one.
| mahomedalid wrote:
| I came here to say the exact same thing, it remind me to
| Macromedia Flash animations.
| HanClinto wrote:
| Yes, very much reminds me of that -- this looks great!
| seabrookmx wrote:
| It still exists. Macromedia Flash became Adobe Flash became
| Adobe Animate: https://www.adobe.com/ca/products/animate.html
|
| Nice to see some free alternatives popping up.
| trangram wrote:
| 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
|
| Thanks so much for your comment and letting me know about
| Macromedia Director.
| Brajeshwar wrote:
| 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)
|
| 2. https://en.wikipedia.org/wiki/State_Bank_of_India
|
| 3. https://en.wikipedia.org/wiki/Wockhardt_Hospitals
| shubhamjain wrote:
| 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 wrote:
| 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=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 wrote:
| 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 :)
| ibejoeb wrote:
| Same experience. Very easy to use and plenty of
| functionality.
|
| What is safety?
| samstave wrote:
| Love it. Tutorial would be lovely, and grid, and lock
| object...
|
| How do you make a new frame
| HanClinto wrote:
| Really impressive work!! Ever since the demise of Flash I've felt
| a strong lack of such animation tools.
|
| Very nicely done!
| trangram wrote:
| Thank you for the kind words. I hope you guys will find it
| useful.
| JSavageOne wrote:
| 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.
| barlog wrote:
| 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
| junto wrote:
| 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 wrote:
| Isn't adobe animate just flash ?
| lukan wrote:
| 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 wrote:
| 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-
| archiv...
| wongarsu wrote:
| 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 wrote:
| 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.
| lukan wrote:
| Yeah, I was talking about Adobe Animate. It is not at all
| as useful as flash was, without exporting to flash.
| Exporting to html/canvas is a pain.
| themagician wrote:
| 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.
| Closi wrote:
| 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.
| lukan wrote:
| In flash you could also select any element and add a onclick
| handler. Bam, a button.
|
| Or play a different animation of a subelement on mouseover
| e.g. bird.flapWings()
|
| And quite some other things ..
|
| This is not a flash replacement and also does not aim to be
| one.
| Closi wrote:
| To clarify, I mainly meant the major animation feature that
| let you do more complex animations compared to this tool.
| albert_e wrote:
| Yes I absolutely loved that.
|
| I wish Microsoft PowerPoint built some of that so we could
| use it for light weight animations and story telling.
| fransje26 wrote:
| > Microsoft [...] light weight [...]
|
| And interesting choice of words!
| brycedriesenga wrote:
| Rive can do that!
| jonplackett wrote:
| Absolutely agree. The interface was what made flash so good
| because it let non-coders make things.
|
| So sad that Adobe were unwilling / unable to just make it
| output html5 instead of swf. But Adobe so where software goes
| to die so...
| niklasrde wrote:
| 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.
| rprwhite wrote:
| I think this might be right up your alley, along with some of
| the children comments: https://rive.app
|
| It's pretty much modern Macromedia Flash. Except a JS runtime,
| rather than plugin.
| erikig wrote:
| 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.
| jaysonelliot wrote:
| 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?
| dncornholio wrote:
| Meanwhile we didn't have a replacement, and any replacement
| lacks of all the features you list, text selection, etc.
|
| It got killed because Apple stopped supporting it. That's the
| reason.
| malauxyeux wrote:
| > 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.
|
| https://en.wikipedia.org/wiki/Thoughts_on_Flash
| dugmartin wrote:
| 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.
| yreg wrote:
| The replacement is CSS + JS. Thank God Apple helped kill
| Flash.
| GenerocUsername wrote:
| 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
| BizarroLand wrote:
| Yep. The tech may be more mature and less prone to
| breakage, but the fun of creating, the joy of stupid
| games went with it for a lot of folks.
| beAbU wrote:
| The heyday of Newgrounds was truly a golden age for
| stupid amateur cartoons and games.
| yreg wrote:
| 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".
| Aerroon wrote:
| I remember that a lot of people were sure that we were
| going to get an even better replacement.
|
| "HTML5 is going to be the replacement."
|
| So much for that. Goodbye web games.
| ktzar wrote:
| 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.
| verticalscaler wrote:
| Flash was vector based.
| beAbU wrote:
| 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.
| swatcoder wrote:
| 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.
| newsclues wrote:
| 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.
| xer0x wrote:
| Thanks for this. People forget the creator experience in
| Flash. It was really amazing, albeit a little quirky.
| tempoponet wrote:
| I'm surprised you bothered to mention SilverLight. It was
| Microsoft's intent, sure, but did it ever have any uptake?
|
| It's more of a curiosity or footnote than a relevant
| factor.
| swatcoder wrote:
| 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.
| Unfrozen0688 wrote:
| Lots of enterprise apps like ERP and that type of shit
| may STILL require Silverlight for older versions. It was
| huge in that market.
| bigfudge wrote:
| 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!
| detritus wrote:
| Yeah, coming from back at that time, to consider
| Silverlight at all is to give it too much credit.
|
| Jobs and his unwillingness to support it on iPhone killed
| Flash, and that's that.
| BizarroLand wrote:
| 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.
| swatcoder wrote:
| 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).
|
| So I'd give your memory like a B+ on this one!
| pimlottc wrote:
| 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.
| sam0x17 wrote:
| 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
| treflop wrote:
| Mobile apps are even worse than Flash and those reasons
| haven't hampered their adoption.
|
| Flash died because both Apple and Microsoft wanted it dead.
| Possibly justifiably.
| karaterobot wrote:
| 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?
| foooorsyth wrote:
| In addition to all of those things, it also burned your
| battery like crazy. Jobs was very public about his
| annoyance with Flash's battery drain.
| hirako2000 wrote:
| 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
| jbl0ndie wrote:
| I'd forgotten how many they had killed off. Adobe
| actually ended up abandoning their Figma acquisition
| https://news.ycombinator.com/item?id=38681861
|
| You could add Lightroom to your list of survivors.
|
| Autodesk employed a similar acquire, absorb some features
| and then retire strategy, in the CAD 2D/3D space.
| robertlagrant wrote:
| > 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.
|
| What was the fallacy?
| beAbU wrote:
| > CSS does everything Flash once did
|
| 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.
| leptons wrote:
| 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.
| pmontra wrote:
| 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.
| pests wrote:
| They did solve the search issue before it's demise.
|
| "Google and Yahoo to Search Inside Flash Files" (2008)
|
| https://archive.nytimes.com/www.nytimes.com/idg/IDG_852573C4.
| ..
| tmaly wrote:
| I also recall that Flash had a ton of security issues.
| henrun12 wrote:
| 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
| raytopia wrote:
| Wick Editor is another one.
|
| https://www.wickeditor.com/#/
| grounder wrote:
| Wick looks fun. Looking at the Github repo, it looks like it
| isn't in active development anymore.
| PaulHoule wrote:
| 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.
| justinclift wrote:
| 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 wrote:
| "Also, is it Open Source?"
|
| No, also:
|
| "We reserve the right to modify this Agreement or its terms
| related to the Services at any time at our discretion."
|
| So it is currently free of charge, but may one day contain
| tracking without warning, or paid membership? The buisness plan
| (how to make money) is not clear to me. And this would be a
| major blocker for me to use if for anything serious, when one
| day I might loose access to my data, unless I pay an
| unspecified amount. You also cannot export your work to a
| common vector format, so will be bound by this website forever.
|
| If you are looking for something Open Source, there is the wick
| editor:
|
| https://www.wickeditor.com/
|
| (but developement is on hold)
| justinclift wrote:
| 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 wrote:
| 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 wrote:
| Here is a free software animator: 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.
| lukan wrote:
| Thanks, I never heard of this one, will try it out.
|
| One very interesting new one is rive.app Closed app, free
| for 3 files, but open source renderer and GPU
| accelerated.
| quaestio wrote:
| 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?
| dkarras wrote:
| This is cool, and "Adobe Illustrator for animation" is perhaps
| Adobe After Effects.
| ramraj07 wrote:
| No, it's adobe flash or whatever the hell they call it
| nowadays.
| 5- wrote:
| very nice!
|
| unless i'm missing something, you don't support export to any
| vector and/or animated formats besides your own?
| asteroidz wrote:
| Certainly a bit disappointing that Lottie or SVG format export
| doesn't exist. Hopefully a work in progress?
| t09i209ba893 wrote:
| 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?
| exodust wrote:
| 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
| maxiwer wrote:
| I'm elated that you used Angular. Because I've been b*tching
| about no one uses it :D
| scosman wrote:
| 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 wrote:
| Yes! That's what I was thinking.
| alistairthomson wrote:
| For lottie export there's: https://www.lottielab.com
| begueradj wrote:
| Great work
| abmmgb wrote:
| 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!!
| tupolef wrote:
| 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.
| santiagobasulto wrote:
| 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?
| wfme wrote:
| 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.
| verdverm wrote:
| Is audio possible, and if not, plans for it?
| self_awareness wrote:
| 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.
| mittermayr wrote:
| 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.
| meekaaku wrote:
| 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
| jonwinstanley wrote:
| 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 wrote:
| I am not necessarily looking to build something production.
| Just want to learn. Any pointers?
| jarek-foksa wrote:
| 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
| dceddia wrote:
| tldraw could be a good example to look at. It's an open source
| infinite canvas drawing app: https://github.com/tldraw/tldraw
|
| The live version is at https://tldraw.com
| kylegalbraith wrote:
| 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 wrote:
| This is a ridiculously complex application dude. I'm sure
| they'll get to keyboard shortcuts when they get to it
| neurostimulant wrote:
| This is great! If you add lottie export, I could see this tool
| become popular among web and mobile app devs.
| tamimio wrote:
| 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 wrote:
| Do you mean scrolljacking?
| tamimio wrote:
| 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 wrote:
| need a free drawing tool instead of pen/line
| weinzierl wrote:
| 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 wrote:
| > 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
| exceptione wrote:
| Doesn't work on Firefox unfortunately.
| drewzero1 wrote:
| 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 wrote:
| 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!
| mittermayr wrote:
| 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 wrote:
| 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 wrote:
| This is one of them that I remember from 2016:
|
| 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 wrote:
| Deep in Meta HQ: "How dare the metric system infringe on
| our IP"
| zelphirkalt wrote:
| 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.
| andsoitis wrote:
| and other things like storygram, thefoodygram, picturegram,
| etc.
| mittermayr wrote:
| 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.
|
| And, I just had a look, here's an article by someone (not me)
| who seemed to experience the exact same threat:
| https://killdozer.medium.com/facebooks-shame-o-
| gram-8e71106c...
| noduerme wrote:
| 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.
| smallmancontrov wrote:
| Being right doesn't matter if you aren't rich enough to
| fight.
| diggan wrote:
| > 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.
| ensignavenger wrote:
| 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.
| nimbleal wrote:
| Or even shoot a documentary as you go. Netflix could end up
| paying for your time.
| frob wrote:
| 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.
| ensignavenger wrote:
| 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.
| ixwt wrote:
| 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.
| BobaFloutist wrote:
| 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.
| lovegrenoble wrote:
| A big company moneygram.com use it with no problem.
| lucideer wrote:
| 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.
| panzi wrote:
| But yet they leave https://telegram.org/ alone for some
| reason.
|
| Weird that an American company would claim the word "gram".
| Thought they hate the metric system. /s
| y42 wrote:
| Well, then the first question I would ask the court: Why
| does Meta not sue big comapny XYZ hosting xyzgram.com?
|
| Not that I don't believe OC, but I don't find any example
| for this story.
| master-lincoln wrote:
| 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.
| zelphirkalt wrote:
| 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.
| illwrks wrote:
| 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 wrote:
| For pure SVG-based animations you should take a look at Boxy
| SVG: https://boxy-svg.com/blog/21
| tgv wrote:
| 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 wrote:
| 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-v...
| lukko wrote:
| 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).
| jzemeocala wrote:
| 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 wrote:
| 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 wrote:
| 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 . See also - _FFmpeg Adds
| Support for Animated JPEG-XL_ -
| https://news.ycombinator.com/item?id=36243889 ).
| MyFedora wrote:
| 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 wrote:
| 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)
| brontosaurusrex wrote:
| There is a typo in font style section: Blod italic (should be
| Bold).
| vasco wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Ah, yes! Thank you!. The export works like a charm. It let me
| select multiple formats.
| latexr wrote:
| > Think Adobe Illustrator but for animation
|
| That makes me think of Flash.
| taink wrote:
| 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
| WillAdams wrote:
| 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 wrote:
| Nice! Feature idea: let me open the demos in the editor.
| ultracakebakery wrote:
| 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-...
| interestica wrote:
| Do you have svg output examples?
| kookamamie wrote:
| Looks very good (instant Flash erhm flashbacks) but jesus christ
| how to add more key points to the timeline?
| forsakenharmony wrote:
| Wish the animations were playing in 60 or even better, my native
| refresh rate.
|
| They look super choppy using firefox on macos
| kraig911 wrote:
| I like it but is there a pen Bezier tool? It'd be perfect with
| that feature.
| mahesh_rm wrote:
| This is amazing. I was able to open it and start creating
| animations! Thank you for this contribution!
| srameshc wrote:
| This is wonderful. I love the simplicity of this tool and my kids
| loved it.
| kokalesi wrote:
| This brings tears in my eyes... thank you <3
| theferalrobot wrote:
| 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.
| i_am_a_squirrel wrote:
| 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.
| mettamage wrote:
| I wonder why nothing like this ever became big again after Flash.
| themagician wrote:
| 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_.
| jimmar wrote:
| Very cool! It's a great balance of power and simplicity.
| happytiger wrote:
| This looks like a free version of https://rive.app/ (also free).
|
| What would you say differentiates it? And why would I pick yours
| over rive long term?
| hellorashid wrote:
| whoa this is seriously impressive!
| alertuser wrote:
| 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 wrote:
| 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 wrote:
| Mac app for web animation: Tumult Hype
|
| https://tumult.com/hype/
|
| Resulting animation can be self-hosted on a web page.
|
| macOS-only, I believe.
___________________________________________________________________
(page generated 2024-03-12 23:01 UTC)