1 line
No EOL
19 KiB
JSON
1 line
No EOL
19 KiB
JSON
{"slug": "fliptheweb--motion-ui-design", "title": "Motion Ui Design", "description": "Resources for inspiration, lists of software, libraries and other stuff related to Motion UI design, animations and transitions.", "github_url": "https://github.com/fliptheweb/motion-ui-design", "stars": "750", "tag": "Front-End Development", "entry_count": 131, "subcategory_count": 10, "subcategories": [{"name": "General", "parent": "", "entries": [{"name": "Resources for inspiration", "url": "#resources-for-inspiration", "description": ""}, {"name": "Articles", "url": "#articles", "description": ""}, {"name": "Software", "url": "#software", "description": ""}, {"name": "Helpers", "url": "#helpers", "description": ""}, {"name": "Libraries", "url": "#libraries", "description": ""}, {"name": "Web animation performance", "url": "#web-animation-performance", "description": ""}, {"name": "Speeches, presentations, videos", "url": "#speeches-presentations-videos", "description": ""}, {"name": "Newsletters, podcasts, screencasts", "url": "#newsletters-podcasts-screencasts", "description": ""}, {"name": "Guidelines", "url": "#guidelines", "description": ""}, {"name": "Books", "url": "#books", "description": ""}]}, {"name": "Sites", "parent": "Resources for inspiration", "entries": [{"name": "Tympanus codrops", "url": "http://tympanus.net/codrops/", "description": "Interactive demos and experiments."}, {"name": "Codyhouse", "url": "http://codyhouse.co/library/", "description": "Interactive demos and experiments."}, {"name": "Dribbble", "url": "http://dribbble.com/shots?list=animated", "description": "Animated shots category on Dribbble."}, {"name": "Codepen", "url": "http://codepen.io/", "description": "HTML/CSS/JS sandbox."}, {"name": "Give \u2019n\u2019 Go", "url": "http://give-n-go.co/", "description": "A curated gallery of Dribbble shots reworked as interactive CodePen pens."}, {"name": "capptivate.co", "url": "http://capptivate.co/", "description": "A collection of awesome mobile interfaces."}, {"name": "Awwwards", "url": "http://awwwards.com/websites/animation/", "description": "Websites examples of designs with animation."}, {"name": "cssanimation.rocks", "url": "http://cssanimation.rocks/", "description": "CSS animated demos."}, {"name": "michaelvillar.com", "url": "http://michaelvillar.com/motion/", "description": "experiments by @michaelvillar (Stripe)."}, {"name": "hakim.se", "url": "http://hakim.se/", "description": "Experiments by @hakimel."}, {"name": "ui-animations.tumblr.com", "url": "http://ui-animations.tumblr.com/", "description": "Animations in software user interfaces."}, {"name": "hoverstat.es", "url": "http://hoverstat.es/", "description": "A collection of interesting web sites curated by Animade studio."}, {"name": "appealing.", "url": "http://app-ealing.com/", "description": "A collection of mobile transitions and animations."}, {"name": "UI Movement", "url": "https://uimovement.com/", "description": "Animated interfaces and newsletter."}]}, {"name": "Pinterest boards", "parent": "Resources for inspiration", "entries": [{"name": "Gestures, transitions, animations", "url": "http://pinterest.com/jvetrau/gestures-transitions-animations/", "description": ""}, {"name": "Web UI animation", "url": "http://pinterest.com/JRMYLFBV/web-ui-animation/", "description": ""}, {"name": "UX/UI interaction & Motion design", "url": "http://pinterest.com/matthieuLrt/ux-ui-interaction-motion-design/", "description": ""}, {"name": "Animated UX/UI", "url": "http://pinterest.com/julient/animated-uxui/", "description": ""}, {"name": "Motion UI", "url": "http://pinterest.com/CodeDesignIO/motion-ui/", "description": ""}]}, {"name": "Processing and other weird, but funny stuff", "parent": "Resources for inspiration", "entries": [{"name": "Bees & bombs", "url": "http://beesandbombs.tumblr.com/", "description": "Processing experiments by Dave Whyte."}, {"name": "PATAKK", "url": "http://patakk.tumblr.com/", "description": "Processing experiments by Paolo Zagreb."}, {"name": "dvdp", "url": "http://dvdp.tumblr.com/", "description": "Visual chinatown by davidope."}, {"name": "bigblueboo", "url": "http://bigblueboo.tumblr.com/", "description": "3d and processing experiments by Charlie Deck."}, {"name": "Misha Kvakin", "url": "http://misha-kvakin.tumblr.com/", "description": "Cinema4D and UI experiments."}, {"name": "How fast should your UI animations be?", "url": "http://valhead.com/2016/05/05/how-fast-should-your-ui-animations-be/", "description": ""}, {"name": "Getting started with UI motion design", "url": "https://medium.com/this-also/getting-started-with-ui-motion-design-d82d4a625801", "description": ""}, {"name": "A Designer\u2019s Guide to Perceived Performance", "url": "https://medium.com/@lukejones/a-designers-guide-to-the-perception-of-performance-fedb4bd102b", "description": ""}, {"name": "How to Use Animation to Improve UX", "url": "https://uxplanet.org/how-to-use-animation-to-improve-ux-338819e93bdb", "description": ""}, {"name": "How To Use Animations and Motion in Web Design", "url": "https://blog.prototypr.io/how-to-use-animations-and-motion-in-web-design-2fd1f68e6e02", "description": ""}, {"name": "UI Animation: Eye-Pleasing, Problem-Solving", "url": "https://uxplanet.org/ui-animation-eye-pleasing-problem-solving-a8b27013f55c", "description": ""}, {"name": "UI Motion Design\u200a\u2014\u200aThe Compendium", "url": "https://blog.prototypr.io/ui-motion-design-the-compendium-d8b478357fa3", "description": ""}, {"name": "Creating Usability with Motion: The UX in Motion Manifesto", "url": "https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc", "description": ""}, {"name": "Jedi Principles of UI Animation", "url": "https://medium.com/@adaptivepath/jedi-principles-of-ui-animation-2b88423b1dac", "description": ""}, {"name": "Micro Interaction; great experience for user engagement", "url": "https://uxplanet.org/micro-interaction-great-experience-for-user-engagement-b37446bf6306", "description": ""}, {"name": "UI Animation. Microinteraction for Macroresult", "url": "https://uxplanet.org/ui-animation-microinteraction-for-macroresult-668cd9e71101", "description": ""}, {"name": "The Principles of UX Choreography", "url": "https://medium.freecodecamp.org/the-principles-of-ux-choreography-69c91c2cbc2a", "description": ""}]}, {"name": "Video, gif, presentation", "parent": "Software", "entries": [{"name": "Adobe After Effects", "url": "https://www.adobe.com/products/aftereffects.htm", "description": "The industry-standard animation and creative compositing app lets you design and deliver professional motion graphics and visual effects for film, TV, video and web:"}, {"name": "Apple Motion", "url": "https://www.apple.com/sg/final-cut-pro/motion/", "description": "MacOS app for create and edit motion graphics, titling for video production and film production, and 2D and 3D compositing for visual effects."}, {"name": "Adobe Photoshop", "url": "http://www.adobe.com/sea/products/photoshop.html", "description": "Raster graphics editor that can also produce gif UI animations:"}, {"name": "Adobe Flash", "url": "http://www.adobe.com/products/flash.html", "description": "Software for creating vector graphics, animations, games etc.."}, {"name": "Apple Keynote", "url": "https://www.apple.com/ru/mac/keynote/", "description": "MacOS app for presentations, but also great for high-fidelity animations and prototypes:"}]}, {"name": "Visual programming", "parent": "Software", "entries": [{"name": "Quartz Composer", "url": "https://developer.apple.com/downloads/", "description": "MacOS app with node-based visual programming language for prototyping MacOS/iOS apps:"}, {"name": "Form", "url": "http://www.relativewave.com/form/", "description": "App with a node-based visual programming language for prototyping apps by Google."}, {"name": "Principle For Mac", "url": "http://principleformac.com/", "description": "MacOS app for create animated and interactive user interface designs."}, {"name": "Floid", "url": "https://floid.io/", "description": "MacOS interaction design tool for any platform & device (Web, iOS, Android)."}]}, {"name": "HTML, CSS and JavaScript", "parent": "Software", "entries": [{"name": "Framer studio", "url": "https://framerjs.com/", "description": "MacOS app for prototyping animations by CoffeeScript programming language."}, {"name": "Tumult Hype", "url": "http://tumult.com/hype/", "description": "MacOS app for creating HTML/CSS sites, banners, presentations etc."}, {"name": "Adobe Edge Animation", "url": "https://creative.adobe.com/products/animate", "description": "App for creating HTML/CSS sites, banners, presentations etc:"}, {"name": "Adobe Experience Design (ex-Project Comet)", "url": "http://www.adobe.com/products/experience-design.html", "description": "App for creating design, prototype and animation of websites and mobile apps (Preview version)."}, {"name": "Google web designer", "url": "https://www.google.com/webdesigner/", "description": "HTML-based designs and motion graphics."}, {"name": "Animatron", "url": "http://animatron.com/", "description": "Web app for creating animations, banners, and infographics."}, {"name": "Pixate", "url": "http://pixate.com/", "description": "Prototyping platform."}, {"name": "SpiritJS", "url": "https://spiritjs.io/", "description": "Animation tool for the web (unrealized yet)."}, {"name": "easings.net", "url": "http://easings.net/", "description": "Easing functions cheat sheet."}, {"name": "cubic-bezier.com", "url": "http://cubic-bezier.com/", "description": "Cubic-bezier visual tool."}, {"name": "csstriggers.com", "url": "http://csstriggers.com/", "description": "List of CSS properties thats trigger repaint, reflow or compositing."}, {"name": "Web Animation Infographics", "url": "http://www.awwwards.com/web-animation-infographics-a-map-of-the-best-animation-libraries-for-javascript-and-css3-plus-performance-tips.html", "description": "Great (but old) infographic with libraries by used technology."}, {"name": "Bouncy Ball", "url": "https://sparkbox.github.io/bouncy-ball/", "description": "Comparing animation techniques by showing how to bounce a ball with each one."}]}, {"name": "CSS", "parent": "Libraries", "entries": [{"name": "Animate.css", "url": "http://daneden.github.io/animate.css/", "description": "Collections of CSS animations."}, {"name": "Effeckt.css", "url": "http://h5bp.github.io/Effeckt.css/", "description": "Collections of UI animations."}, {"name": "Bounce.js", "url": "http://bouncejs.com/", "description": "Tool for generate nice CSS keyframes animation from js easing function."}, {"name": "Animations.css", "url": "http://justinaguilar.com/animations/", "description": "Collection."}, {"name": "Magic animations", "url": "http://www.minimamente.com/example/magic_animations/", "description": "Collection."}, {"name": "UI buttons", "url": "http://uibuttons.com/", "description": "Collection of buttons."}, {"name": "Hover.css", "url": "http://ianlunn.github.io/Hover/", "description": "Hover effects."}, {"name": "Morf", "url": "http://www.joelambert.co.uk/morf/", "description": "Transitions with custom easing functions."}, {"name": "Awesome CSS3 animations", "url": "http://pavlyukpetr.com/awesome/", "description": "Library of animations."}, {"name": "All Animation", "url": "http://all-animation.github.io/", "description": "Set of fun animations to make your project sexier."}, {"name": "CSS Animate", "url": "http://cssanimate.com/", "description": "Tool for easy and fast creating CSS3 keyframes animation."}, {"name": "Mantra", "url": "http://jeremyckahn.github.io/mantra/", "description": "Tool for creating keyframes animation."}]}, {"name": "JavaScript", "parent": "Libraries", "entries": [{"name": "GreenSock", "url": "http://greensock.com/", "description": "Ultra high-performance, professional-grade animation for the modern web."}, {"name": "Velocity.js", "url": "http://julian.com/research/velocity/", "description": "Accelerated JavaScript animation."}, {"name": "Impulse", "url": "http://impulse.luster.io/", "description": "High-performance interactions for mobile web."}, {"name": "AniJS", "url": "http://anijs.github.io/", "description": "Animations by declared data-attributes."}, {"name": "Snabbt.js", "url": "http://daniel-lundin.github.io/snabbt.js/", "description": "Minimalistic animation library in JavaScript."}, {"name": "Famo.us", "url": "http://famous.org/", "description": "High-performance JavaScript library for animations & interfaces."}, {"name": "Processing.js", "url": "http://processingjs.org/", "description": "JavaScript library for Processing visual programming language."}, {"name": "Framer.js", "url": "https://github.com/koenbok/Framer", "description": "Prototyping tool for designing UI, interaction and animation.", "stars": "5.7k"}, {"name": "Dynamics.js", "url": "http://dynamicsjs.com/", "description": "JavaScript library to create physics-based animations."}, {"name": "Mo.js", "url": "https://github.com/legomushroom/mojs", "description": "Motion graphics toolbelt for the web.", "stars": "18k"}, {"name": "AnimateTransition", "url": "http://rapid-application-development-js.github.io/AnimateTransition/", "description": "Library for transition of blocks and popups."}, {"name": "Animate Plus", "url": "https://github.com/bendc/animateplus", "description": "CSS and SVG animation library for modern browsers, performant and lightweight (3KB gzipped), making it particularly well-suited for mobile.", "stars": "5.9k"}, {"name": "Gravitas.js", "url": "https://github.com/iamralpht/gravitas.js", "description": "Super fast physics simulations for JavaScript.", "stars": "161"}, {"name": "Popmotion", "url": "https://popmotion.io/guides/basics/get-started/", "description": "JavaScript motion engine that makes creating engaging user interactions quick and simple."}, {"name": "anime.js", "url": "http://animejs.com/", "description": "Lightweight JavaScript animation library."}, {"name": "useAnimations", "url": "https://useanimations.com/", "description": "micro-animations icon library;"}]}, {"name": "SVG", "parent": "Libraries", "entries": [{"name": "SnapSVG", "url": "http://snapsvg.io/", "description": "JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM."}, {"name": "BonsaiJS", "url": "https://bonsaijs.org/", "description": "Lightweight graphics library with intuitive graphics API and SVG renderer."}, {"name": "Vivus.js", "url": "http://maxwellito.github.io/vivus/", "description": "Allows you to animate SVGs, giving them the appearence of being drawn."}, {"name": "Walkway.js", "url": "http://connoratherton.com/walkway", "description": "Easy way to animate SVG images consisting of line, path, and polyline elements."}, {"name": "Transformicons", "url": "http://www.transformicons.com/", "description": "Animated icons, symbols and buttons using SVG and CSS."}, {"name": "Jankfree.org", "url": "http://jankfree.org/", "description": "Collection of articles and presentations about browser performance."}, {"name": "High performance animations", "url": "http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/", "description": ""}, {"name": "How to Create Smoother Animations and Transitions in the Browser", "url": "http://blog.teamtreehouse.com/create-smoother-animations-transitions-browser", "description": ""}, {"name": "CSS animations and transitions performance: looking inside the browser", "url": "http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/", "description": ""}, {"name": "Interface Animations (Mark Geyer)", "url": "http://markgeyer.com/pres/interface-animations/", "description": "Workshop on BlendConf 2014."}, {"name": "The future of UX \u2013 Animation on the Brain (Rachel Nabors)", "url": "http://www.slideshare.net/CrowChick/animation-and-the-future-of-ux-33573726", "description": ""}, {"name": "Designing Complex SVG Animations (Sarah Drasner, Trulia)", "url": "http://slides.com/sdrasner/cssdevconf", "description": ""}, {"name": "Designing with animation (Pasquale D'Silva)", "url": "https://www.youtube.com/watch?v=TMe0WnkF1Lc\\&feature=youtu.be\\&list=UURx1y52pfeMwbuer9Vh2u-A\\&html5=1", "description": ""}, {"name": "Animating Web Experiences (John Allsopp)", "url": "https://www.youtube.com/watch?v=66Kf8fMfh1M\\&list=UURx1y52pfeMwbuer9Vh2u-A\\&index=47", "description": ""}, {"name": "Putting Your UI in Motion (Val Head)", "url": "http://aneventapart.com/news/post/putting-your-ui-in-motion-with-css-by-val-head-an-event-apart-video", "description": ""}, {"name": "Motion design with CSS (Val Head)", "url": "https://www.youtube.com/watch?v=TjsXqt-UxLo\\&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA", "description": ""}, {"name": "Lets move! (Benjamin De Cock, Stripe)", "url": "https://www.youtube.com/watch?v=J6wUmQDQBkw", "description": ""}, {"name": "Animating Your UX (Rachel Nabors)", "url": "https://futureinsights-1.wistia.com/medias/k62k980uo7", "description": ""}, {"name": "Styling and Animating Scalable Vector Graphics with CSS (Sara Soueidan)", "url": "https://www.youtube.com/watch?v=lf7L8X6ZBu8\\&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA", "description": ""}, {"name": "Animating the User Experience (Rachel Nabors)", "url": "https://www.youtube.com/watch?v=bM4qJpg7KhI", "description": ""}, {"name": "Designing meaningful animation (Val Head)", "url": "https://vimeo.com/165995133", "description": ""}, {"name": "Functional Animation (Sarah Drasner)", "url": "https://www.youtube.com/watch?v=HaD5z2KqcGk\\&feature=youtu.be", "description": ""}, {"name": "Animations anew - laziness, arrogance and intolerance (Andrey Sitnik)", "url": "http://ai.github.io/anim2012/", "description": ""}, {"name": "The UI Animation Newsletter", "url": "http://valhead.com/newsletter/", "description": "newsletter with resources plus helpful advice on how to make web animation work for you coming straight to your inbox each month by @valhead."}, {"name": "Web Animation Weekly", "url": "http://webanimationweekly.com/", "description": "newsletter with articles, videos, book reviews, and other goodies pertaining to the wonderful worlds of web animation and motion design by Rachel Nabors."}, {"name": "Motion and meaning", "url": "http://motionandmeaning.io/", "description": "Podcast about motion for digital designers by @valhead and Cennydd Bowles."}, {"name": "All The Right Moves", "url": "https://vimeo.com/channels/alltherightmoves/", "description": "Animation reviews by @valhead."}, {"name": "UI Movement", "url": "https://uimovement.com/", "description": "best of the week UI animations newsletter."}, {"name": "SalesForce Lightning", "url": "https://www.lightningdesignsystem.com/design/motion/", "description": ""}, {"name": "The Web In Motion: Practical Considerations For Designing With Animation", "url": "https://shop.smashingmagazine.com/products/the-web-in-motion-practical-considerations-for-designing-with-animation", "description": ""}, {"name": "Motion Design for iOS", "url": "https://designthencode.com/", "description": ""}, {"name": "Animation in HTML, CSS, and JavaScript", "url": "http://www.kirupa.com/book/animation_in_html_css_and_javascript.htm", "description": ""}, {"name": "Futureproof Web Design Techniques. Interaction Design & Complex Animations", "url": "http://www.uxpin.com/curated-interaction-design-animations.html", "description": ""}, {"name": "CSS animations", "url": "http://cssanimationspocketguide.com/", "description": ""}, {"name": "Designing Interface Animations", "url": "http://rosenfeldmedia.com/books/designing-interface-animations/", "description": ""}]}], "name": ""} |