{"action":"created","issue":{"url":"https://api.github.com/repos/kenwheeler/cash/issues/119","repository_url":"https://api.github.com/repos/kenwheeler/cash","labels_url":"https://api.github.com/repos/kenwheeler/cash/issues/119/labels{/name}","comments_url":"https://api.github.com/repos/kenwheeler/cash/issues/119/comments","events_url":"https://api.github.com/repos/kenwheeler/cash/issues/119/events","html_url":"https://github.com/kenwheeler/cash/issues/119","id":153254076,"number":119,"title":"Animation","user":{"login":"shshaw","id":777155,"avatar_url":"https://avatars.githubusercontent.com/u/777155?v=3","gravatar_id":"","url":"https://api.github.com/users/shshaw","html_url":"https://github.com/shshaw","followers_url":"https://api.github.com/users/shshaw/followers","following_url":"https://api.github.com/users/shshaw/following{/other_user}","gists_url":"https://api.github.com/users/shshaw/gists{/gist_id}","starred_url":"https://api.github.com/users/shshaw/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shshaw/subscriptions","organizations_url":"https://api.github.com/users/shshaw/orgs","repos_url":"https://api.github.com/users/shshaw/repos","events_url":"https://api.github.com/users/shshaw/events{/privacy}","received_events_url":"https://api.github.com/users/shshaw/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/kenwheeler/cash/labels/feature","name":"feature","color":"ff8244"},{"url":"https://api.github.com/repos/kenwheeler/cash/labels/question","name":"question","color":"c5def5"}],"state":"open","locked":false,"assignee":{"login":"shshaw","id":777155,"avatar_url":"https://avatars.githubusercontent.com/u/777155?v=3","gravatar_id":"","url":"https://api.github.com/users/shshaw","html_url":"https://github.com/shshaw","followers_url":"https://api.github.com/users/shshaw/followers","following_url":"https://api.github.com/users/shshaw/following{/other_user}","gists_url":"https://api.github.com/users/shshaw/gists{/gist_id}","starred_url":"https://api.github.com/users/shshaw/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shshaw/subscriptions","organizations_url":"https://api.github.com/users/shshaw/orgs","repos_url":"https://api.github.com/users/shshaw/repos","events_url":"https://api.github.com/users/shshaw/events{/privacy}","received_events_url":"https://api.github.com/users/shshaw/received_events","type":"User","site_admin":false},"milestone":null,"comments":34,"created_at":"2016-05-05T15:15:46Z","updated_at":"2016-05-20T17:51:02Z","closed_at":null,"body":"# [Latest Prototype](http://codepen.io/shshaw/pen/LNKyzR?editors=0010)\r\n\r\n## Cash.fn.animate essentials:\r\n- [x] Psuedo jQuery-compatible API, not 100% parity but enough to ease migration\r\n- [x] Use `Element.animate`, falling back to a `requestAnimationFrame` animation engine\r\n- [x] `$.animate` method for animating object properties using the `requestAnimationFrame` engine.\r\n- [x] Group animation calls into one `requestAnimationFrame` loop for best performance\r\n- [x] Support animating multiple `transform` properties using `x`, `y`, `z`, `scale`, etc. (we should be able to parse the current `element.style.transform` to fill in the 'from' values.)\r\n- [x] `start` and `complete` callbacks (per element)\r\n- [ ] `progress` callbacks (may be problematic with `Element.animate`, but necessary for Object callbacks)\r\n- [x] Stagger feature for offsetting collection animations\r\n- [ ] Attempt to convert between % and px where possible ( animating from `width: 100%` to `width: 20px`, for example)\r\n- [ ] Target weight of 2-4kb minified, 1-2kb gzipped.\r\n\r\n## Possible features:\r\n- [x] CSS Transform Matrix conversion to correctly animate from existing transforms. *(needs further testing)*\r\n- [ ] `collectionComplete` callback (`allComplete`, `animationend`?)\r\n- [x] Bezier curve conversion ( [reference](https://gist.github.com/MadRabbit/996893) ) for CSS compatible easing *(need to compare with standard CSS easings)*\r\n- [ ] Fire events instead of callbacks?\r\n- [ ] True `fill` support? Currently applies whatever the end state of animation is (equivalent to `fill: both`)\r\n- [ ] `stop` method\r\n- [ ] Sequential animations `var frames = [ [{ props }, { opts }], [{ props }, { opts }] ]; $(element).animate(frames);`\r\n\r\n\r\n## Original Issue\r\nI think the future of Cash may need to center around modularity with lightweight extensions/plugins. There are only so many DOM methods we can add that are worthwhile, and performance optimizations will only go so far.\r\n\r\nThe main Cash package will always have the most useful methods to help beginners get started, but I picture developers being able to select the features/modules they need to get a lightweight package (less than 10-15kb) that gives them exactly what they need for a project without any cruft like we've talked about in #94.\r\n\r\nThinking along those terms, I have a basic animation engine (two files: [animateCore.js](https://github.com/shshaw/Canvallax/blob/v2.0.0/src/animateCore.js) and [canvallax.Animate.js](https://github.com/shshaw/Canvallax/blob/v2.0.0/src/canvallax.Animate.js) that's quite performant. It could easily be adapted as a cash plugin, minified to about 1kb gzipped, 2kb minified.\r\n\r\nCurrently it's more along the lines of [GSAP TweenMax](https://greensock.com/docs/#/HTML5/GSAP/TweenMax/) syntax and designed to animate properties of objects, but it could be adapted to handle CSS properties and more closely match the jQuery syntax for compatibility while introducing some more advanced functions (delay, repeat, animateFrom, animateFromTo, etc).\r\n\r\nLike the discussion for AJAX ( #103 ), this wouldn't be an addition to the core, but a separate module for those that want a lightweight but familiar syntax to run simple animations. jQuery with the animation module is at least 50kb, and TweenLite + jQuery support is around 30kb. That's a lot to add for simple effects like spinning an element when clicked or to smoothing a transition from point A to point B.\r\n\r\nAny thoughts on animation or the future of Cash?"},"comment":{"url":"https://api.github.com/repos/kenwheeler/cash/issues/comments/220673943","html_url":"https://github.com/kenwheeler/cash/issues/119#issuecomment-220673943","issue_url":"https://api.github.com/repos/kenwheeler/cash/issues/119","id":220673943,"user":{"login":"tommiehansen","id":8710941,"avatar_url":"https://avatars.githubusercontent.com/u/8710941?v=3","gravatar_id":"","url":"https://api.github.com/users/tommiehansen","html_url":"https://github.com/tommiehansen","followers_url":"https://api.github.com/users/tommiehansen/followers","following_url":"https://api.github.com/users/tommiehansen/following{/other_user}","gists_url":"https://api.github.com/users/tommiehansen/gists{/gist_id}","starred_url":"https://api.github.com/users/tommiehansen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tommiehansen/subscriptions","organizations_url":"https://api.github.com/users/tommiehansen/orgs","repos_url":"https://api.github.com/users/tommiehansen/repos","events_url":"https://api.github.com/users/tommiehansen/events{/privacy}","received_events_url":"https://api.github.com/users/tommiehansen/received_events","type":"User","site_admin":false},"created_at":"2016-05-20T17:51:02Z","updated_at":"2016-05-20T17:51:02Z","body":"Yes, that would be the expected behaviour. Has nothing to do with staggering though but rather has to do with collections, collections can be anything like `$('h1, p, .box')`\r\n\r\nSay one would want a startpage where one slides up a bounch of elements and after _that_ has completed show a background image or start a video in the background. That's something that is more common then my box-thing."}}
{"actor":{"display_login":"tommiehansen"}}