bpmn-js-token-simulation
theatre
bpmn-js-token-simulation | theatre | |
---|---|---|
2 | 27 | |
238 | 10,791 | |
2.9% | 1.4% | |
8.3 | 8.4 | |
13 days ago | about 1 month ago | |
JavaScript | TypeScript | |
MIT License | Apache License 2.0 |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
bpmn-js-token-simulation
-
Ask HN: How to quickly animate sketches and 2D diagrams?
I'm using Mermaid, Excalidraw and PlantUML diagrams to explain and document what I'm working on and they work great and are a lot better than screens of prose, but I've become aware that something is missing: motion.
Animation brings a whole lot more to explanations, making simple explanations of how request coalescing works easy to understand, token simulations [0] through to helping explain concepts like Fresnel lenses [1]. Embedding them into GitHub READMEs, tweets and documentation would be awesome.
I found Excalidraw Claymate [2] but the stop motion approach with no tweening support makes it painful to create animations where circles move from place to place. There's also Manim [3] but I think this is more for maths.
Adobe Flash used to be the go-to; what do you reach for when you want to illustrate a concept with an animated diagram?
0. https://github.com/bpmn-io/bpmn-js-token-simulation
1. https://news.ycombinator.com/item?id=30576688
2. https://github.com/dai-shi/excalidraw-claymate
3. https://github.com/ManimCommunity/manim
-
Stately Editor Public Beta
Nice work! Anything that helps visualise state I'm happy to see.
Reading the linked article I'm unclear: does Stately generate output that we run with XState? Or is it a SaaS where we design and run the state machine (a bit like Camunda provides for running BPMN diagrams)?
If not already present, a visual runner would be awesome - like https://github.com/bpmn-io/bpmn-js-token-simulation allows, to explore the state.
theatre
-
Time-Based CSS Animations
For anything more advanced than a simple easing function or some basic keyframes on one or two channels you'll quickly run into the limitations of this approach.
I've been using Theatre.js the last few years and really loving it. It's a library divided into two parts; one is a studio UI with a timeline for editing keyframes and bezier curves, and the other is a runtime for taking those keyframes and interpolating values in relation to a timeline. Try it for anything that requires coordinated animations.
https://www.theatrejs.com/
-
Can we talk about the absolute chokehold GSAP has on the industry?
https://www.theatrejs.com/ (saw this just yesterday ..looks interesting)
- Anime.js – A lightweight JavaScript animation library
-
10 repositories to star if you are a Javascript developer
9. TheatreJs - 8.8k stars
- Is there any guide for Threejs (and R3F) aniamtion?
- Theatre.js – Animation Toolbox for the Web
- [AskJS] Library that gives you a UI like the editor of premier pro/final cut
-
8 Helpful Tools For Frontend Developers 🦄
5. Theatre JS
-
3 Frontend Developers' Must-Have Tools
Theatre.Js. For the web, I created a motion design. Theatre.js is a GUI-based JavaScript animation library. The DOM, WebGL, and any other JavaScript variable are animated. It's essentially a visual editor for animating DOM objects. www.theatrejs.com
- Ask HN: How to quickly animate sketches and 2D diagrams?
What are some alternatives?
excalidraw-claymate - A tool based on Excalidraw to create stop motion animations and slides.
web-animations-js - JavaScript implementation of the Web Animations API
bpmn-engine - BPMN 2.0 execution engine. Open source javascript workflow engine.
Mattermost - Mattermost is an open source platform for secure collaboration across the entire software development lifecycle..
hexapod - Blazing fast hexapod robot simulator for the web.
openmoji - Open source emojis for designers, developers and everyone else!
qni - Quantum live-programming app that runs in your browser.
python-goto - A function decorator, that rewrites the bytecode, to enable goto in Python
manim - A community-maintained Python framework for creating mathematical animations.
three.js - JavaScript 3D Library.
diagrams - :art: Diagram as Code for prototyping cloud system architectures