site/index.html at master · animachine/site · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<!-- saved from url=(0022)http://animachine.org/ -->
<html data-wf-site="5740dd3515d374a82613dd70" data-wf-page="5740dd3615d374a82613dd73" data-wf-domain="animachine.org" class="w-mod-js w-mod-no-touch w-mod-video w-mod-no-ios wf-opensans-n3-active wf-opensans-n4-active wf-opensans-n7-active wf-roboto-n5-active wf-opensans-i3-active wf-opensans-i4-active wf-opensans-n6-active wf-opensans-i6-active wf-opensans-i7-active wf-opensans-n8-active wf-opensans-i8-active wf-roboto-n3-active wf-roboto-n4-active wf-active"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>animachine</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="google-site-verification" content="rYFTJUUjNFINvh-5_ag2ptTX507XUn-U0g4_MB2K_Ng"><meta name="generator" content="Webflow"><link rel="stylesheet" type="text/css" href="./animachine_files/animachine.webflow.c20497bee.css"><script src="./animachine_files/ga.js"></script><script src="./animachine_files/webfont.js"></script><link rel="stylesheet" href="./animachine_files/css"><script>WebFont.load({
  google: {
    families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Roboto:300,regular,500"]
  }
});</script><script type="text/javascript" src="./animachine_files/modernizr-2.7.1.js"></script><link rel="shortcut icon" type="image/x-icon" href="https://daks2k3a4ib2z.cloudfront.net/5740dd3515d374a82613dd70/5759d1774d638b53092f1fe5_favicon-32x32.png"><link rel="apple-touch-icon" href="https://daks2k3a4ib2z.cloudfront.net/img/webclip.png"><script type="text/javascript">var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-59337351-1'], ['_trackPageview']);
(function() {
  var ga = document.createElement('script');
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script></head><body><div class="w-nav navigation-bar" data-animation="default" data-collapse="medium" data-contain="1" data-duration="400"><div class="w-container"><a class="w-nav-brand brand-link w--current" href="http://animachine.org/"><h1 class="brand-text">animachine</h1></a><nav class="w-nav-menu navigation-menu" role="navigation"><a class="w-nav-link navigation-link" href="https://github.com/animachine/animachine/issues" style="max-width: 940px;">Feedback</a></nav><div class="w-nav-button hamburger-button"><div class="w-icon-nav-menu"></div></div></div><div class="w-nav-overlay" data-wf-ignore=""></div></div><div class="w-section hero-section centered"><div class="w-container" data-ix="new-interaction"><h1 class="hero-heading" data-ix="fade-in-bottom-page-loads" style="opacity: 1; transform: translateX(0px) translateY(0px) translateZ(0px); transition: opacity 1000ms, transform 1000ms;">animachine</h1><div class="hero-subheading" data-ix="fade-in-bottom-page-loads" style="opacity: 1; transform: translateX(0px) translateY(0px) translateZ(0px); transition: opacity 1000ms, transform 1000ms;">gui for GSAP</div><div data-ix="fade-in-bottom-page-loads" style="opacity: 1; transform: translateX(0px) translateY(0px) translateZ(0px); transition: opacity 1000ms, transform 1000ms;"><a class="button" href="https://chrome.google.com/webstore/detail/animachine-v02-alpha/feefkphfphgbcidiajhoapphgmnfhgod">get it</a><a class="hollow-button all-caps" href="http://docs.animachine.org/">Learn</a></div></div></div><div class="w-section section"><div class="w-container"><div class="section-title-group"><h2 class="section-heading centered">What's This?</h2><div class="section-subheading center">A timeline based animation tool in a browser extension for animating your web content in its original context.</div></div><div class="section-title-group"><h2 class="section-heading centered">How it Works?</h2><div class="section-subheading center">1. open animachine on any web page<br>2. select nodes for the timeline with css selectors<br>3. animate<br>4. save the animation as a .js file<br>5. include the .js into your app<br>7. apply the animations and use them as a GSAP timeline<br>8. open animachine again and continue the editing<br><a href="http://docs.animachine.org/">see the full docs here</a></div></div><div class="section-title-group"><h2 class="section-heading centered">Demos</h2><div><a class="navigation-link" href="http://demo.animachine.org/#/Jumper" target="_blank">Jumping Jar</a><a class="navigation-link" href="http://demo.animachine.org/#/Robots" target="_blank">Pointless Robots</a></div></div><div class="section-title-group"><h2 class="section-heading centered">Why is this needed?</h2><div class="section-subheading center">We have great tools to make animations for the web (like Adobe Animate, Google Webdesigner or Animatron) but all of these are only for making sandboxed animations and embedding the boxes somewhere (usually in 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.</div></div><div class="section-title-group"><h2 class="section-heading centered">SHould I Use This?</h2><div class="section-subheading center">No, at the moment this is a "proof of concept" and not a matured tool. But if you interested in the idea you should definitely give it a try and keep your eye on it (i tweet and mail about the updates) and maybe help with your thoughts (you can open issues <a href="https://github.com/animachine/animachine/issues">here</a>).</div></div><div class="section-title-group"><h2 class="section-heading centered">Subscribe</h2><div class="section-subheading center">This tool is not done. Subscribe for updates!</div><div class="w-form"><form action="http://animachine.us13.list-manage.com/subscribe/post?u=760131f33f06cda0e249407f3&amp;amp;id=47347200ef" data-name="Email Form" id="email-form" method="post" name="email-form"><input class="w-input email-field" data-name="Email" id="email" maxlength="256" name="email" placeholder="Enter your email address" required="required" type="email"><input class="w-button" data-wait="Please wait..." type="submit" value="Submit"></form><div class="w-form-done"><p>Thank you! Your submission has been received!</p></div><div class="w-form-fail"><p>Oops! Something went wrong while submitting the form</p></div></div></div></div></div><div class="w-section section accent"><div class="w-container"><h2 class="section-heading centered white">Features</h2><div class="w-row"><div class="w-col w-col-4"><div class="white-box"><img src="./animachine_files/5752d9673c241ee12e05db53_inbrowser.gif"><h3 class="feature-title">in browser</h3><p>Open on any site</p><div class="white-box"><img src="./animachine_files/5753ec1b9fbd77325241e9cf_ease.gif"><h3 class="feature-title">Ease</h3><p>With simple inline editor</p></div></div></div><div class="w-col w-col-4"><div class="white-box"><img src="./animachine_files/5753ec999fbd77325241eb00_dom-picker.gif"><h3 class="feature-title">DOm picker</h3><p>Pick a node and it will generate the css selector</p><div class="white-box"><img src="./animachine_files/5752d764e00e5fe22ed5e97c_timeline.gif"><h3 class="feature-title">Timeline</h3><p>Handy and keeps getting handier</p></div></div></div><div class="w-col w-col-4"><div class="white-box"><img src="./animachine_files/574adf5e0d254d79455e521a_687474703a2f2f7a697070792e6766796361742e636f6d2f496e646f6c656e74426f776564427573746172642e676966.gif"><h3 class="feature-title">Transform</h3><p>As you like it!</p><div class="white-box"><img src="./animachine_files/5753ebf5fcdc27ff2e51367e_save.gif"><h3 class="feature-title">js export</h3><p>Save, reload, and use it as a GSAP timeline</p></div></div></div></div><div class="section-subheading center off-white">And more coming...</div></div></div><div class="w-section footer"><div class="w-container"><div class="w-row"><div class="w-col w-col-4 spc"><h5>about</h5><p>Hi, i'm a developer from Hungary and this is a hobby project of mine. You can find me on <a href="https://twitter.com/azazdeaz">twitter</a> and <a href="https://github.com/azazdeaz">github</a>.</p></div><div class="w-col w-col-4 spc"><h5>other things</h5><a class="footer-link" href="https://chrome.google.com/webstore/detail/god-mode/gnkomilcmfdfonapjnnpedakfkphhnfc">God Mode - transform tool for the web</a></div><div class="w-col w-col-4"><h5>social</h5><div class="w-clearfix footer-link-wrapper"><img class="info-icon" src="./animachine_files/5740dd3615d374a82613dd97_social-18.svg" width="20"><a class="footer-link with-icon" href="https://twitter.com/animachinejs">animachine twitter</a></div></div></div></div></div><script type="text/javascript" src="./animachine_files/jquery.min.js"></script>
<script type="text/javascript" src="./animachine_files/webflow.f6504cfc0.js"></script>
<!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->

</body></html>