fourks / animachine Goto Github PK

##animachine ######a GUI for GSAP
Create code driven animation using traditional animation tools (like timeline, transformtool, etc). All you have to do is install the Chrome extension, open your project in Chrome, hit the animachine button, and start animating!

###Status work in progress

This is the second alpha release completely rewritten using React and Redux. For now, it animates only React components with a very minimal feature set but you can see in the Todos what's coming up.

Here you can check out the previous alpha version

Update: Currently stuck on performance issues... (And thinking on switching to Elm)

###Check out the quick start with React guide!

###Why is this needed? You have great tools to make animations for the web (like Adobe Edge, Google Webdesigner or Animatron) but all of these are only for making sandboxed animations and embedding the boxes somewhere (usually ouin an iframe). If you need to animate some inner part of your project (ex. when a dialog appears or a game character jumps and walks) it has to be coded by a programmer. When this animation has to be long, artistic or done by somebody who is not a skilled programmer, this work can be tedious or almost impossible which can prevent us from seeing more fine and sophisticated animations on the web.

###How is this working? In a nutshell, when you click on the extension you'll have an overlay on your page with the animation tools which you'll be familiar with if you ever made animations with programs like Anime Studio, Adobe Edge, After Effects, etc.
Then you can pick elements from your page and start animating them. When it's done, you can save your animation as a .js file and include it in your page.
If you want to change your animation later just open your project and animachine again, it will recognize the animations, and offer to continue editing them.

###Demos:

• animations: jumping thing, pointless-robots
• components: Zombie

Here you can check out the demos for the previous alpha version which has more features at the moment.

###Todos:

• Select elements with click
• Advanced ease editor
• Undo/redo history
• Bezier motion path editor
• SVG path morphing
• Hotkeys
• In app tours
• Support for plain DOM Nodes (and jQuery)
• Param groups (like scale for scaleX and scaleY)
• 3D transform params
• resolve performance issues

	free transform tool
inslnie ease editor
	timeline navigator

These separated modules are developed as part of animachine:

• transhand
• react-gsap-enhancer
• react-animachine-enhancer
• react-matterkit
• json-vision
• spaceman
• react-theme
• custom-drag