Awesome List Updates on Sep 27, 2018

8 awesome lists updated today.

🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor

1. Awesome Eta

Introduction / Overview

• GitHub (⭐2.5k) - Eta on GitHub.

• Philosophy - Interview about the philosophy behind Eta's development.

Introduction / Official Resources

• Eta Blog: Java I - Using Eta with Java, part I.

• Eta Blog: Java II - Using Eta with Java, part II.

• Eta Blog: Haskell - Using Haskell packages in Eta code.

• Eta Blog: Scala - Using Eta code in Scala projects.

Tools / Talks

• sbt (⭐58) - Plugin for integrating Eta into Scala.

• gradle (⭐28) - Gradle plugin for Eta projects.

2. Awesome Flutter

Templates / Preferences

• Liquid Pay Payment App (⭐293) - Liquid Pay App Concept by Long Hoang

3. Awesome Swift

Chat

• InputBarAccessoryView (⭐1.1k) - A simple and easily customizable InputAccessoryView for making powerful input bars with autocomplete and attachments.

4. Motion Ui Design

Resources for inspiration / Sites

• Tympanus codrops – Interactive demos and experiments.

• Codyhouse – Interactive demos and experiments.

• Dribbble – Animated shots category on Dribbble.

• Codepen – HTML/CSS/JS sandbox.

• Give ’n’ Go – A curated gallery of Dribbble shots reworked as interactive CodePen pens.

• capptivate.co – A collection of awesome mobile interfaces.

• Awwwards – Websites examples of designs with animation.

• cssanimation.rocks – CSS animated demos.

• michaelvillar.com – experiments by @michaelvillar (Stripe).

• hakim.se – Experiments by @hakimel.

• ui-animations.tumblr.com – Animations in software user interfaces.

• hoverstat.es – A collection of interesting web sites curated by Animade studio.

• appealing. – A collection of mobile transitions and animations.

Newsletters, podcasts, screencasts / SVG

• UI Movement - best of the week UI animations newsletter.

• The UI Animation Newsletter – newsletter with resources plus helpful advice on how to make web animation work for you coming straight to your inbox each month by @valhead.

• Web Animation Weekly – newsletter with articles, videos, book reviews, and other goodies pertaining to the wonderful worlds of web animation and motion design by Rachel Nabors.

• Motion and meaning – Podcast about motion for digital designers by @valhead and Cennydd Bowles.

• All The Right Moves – Animation reviews by @valhead.

Resources for inspiration / Pinterest boards

• Gestures, transitions, animations by Yuri Vetrov.

• Web UI animation by JRMY LFBV.

• UX/UI interaction & Motion design by Matthieu Lerat.

• Animated UX/UI by Julien Tilly.

Resources for inspiration / Processing and other weird, but funny stuff

• Bees & bombs – Processing experiments by Dave Whyte.

• PATAKK – Processing experiments by Paolo Zagreb.

• dvdp – Visual chinatown by davidope.

• bigblueboo – 3d and processing experiments by Charlie Deck.

Articles / Processing and other weird, but funny stuff

• How fast should your UI animations be? by @valhead.

• Getting started with UI motion design by @Molly Lafferty.

• A Designer’s Guide to Perceived Performance by @Luke Jones.

• How to Use Animation to Improve UX by @Nick Babich.

• How To Use Animations and Motion in Web Design by @PageCloud

• UI Animation: Eye-Pleasing, Problem-Solving by @Tubik Studio.

• UI Motion Design — The Compendium by @Thalion.

• Creating Usability with Motion: The UX in Motion Manifesto by @Issara Willenskomer.

• Jedi Principles of UI Animation @Adaptive Path.

• Micro Interaction; great experience for user engagement @Sneha Munot.

• UI Animation. Microinteraction for Macroresult @Tubik Studio.

• The Principles of UX Choreography @Rebecca Ussai Henderson.

Software / Video, gif, presentation

• Adobe After Effects – 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:
  • Using After Effects for UI Animation Prototypes (🎥 video).
  • UI Animation tutorials.
  • How to Use After Effects for Web Animation Prototypes (🎥 video).
  • MtMograph summits (🎥 video).
  • 30 days of AE (🎥 video).
  • After Effects CC Essential Training on Lynda (🎥 video).
  • BodyMovin (⭐28k) – Converter from AE to SVG/canvas.
  • Squall – Converter from AE to iOS.

• Apple Motion – MacOS app for create and edit motion graphics, titling for video production and film production, and 2D and 3D compositing for visual effects.

• Adobe Photoshop – Raster graphics editor that can also produce gif UI animations:
  • 9 Photoshop UI Animation Tutorials.

• Adobe Flash – Software for creating vector graphics, animations, games etc..

Software / Visual programming

• Quartz Composer – MacOS app with node-based visual programming language for prototyping MacOS/iOS apps:
  • The 4 Minute Guide to Quartz Composer (🎥 video).
  • Introducing Origami for QC.
  • Origami – A tool for creating modern UI by Facebook.
  • Avocado – A toolbox for interaction designers.

• Form – App with a node-based visual programming language for prototyping apps by Google.

• Principle For Mac – MacOS app for create animated and interactive user interface designs.

Helpers / HTML, CSS and JavaScript

• easings.net – Easing functions cheat sheet.

• cubic-bezier.com – Cubic-bezier visual tool.

• csstriggers.com – List of CSS properties thats trigger repaint, reflow or compositing.

Libraries / HTML, CSS and JavaScript

• Web Animation Infographics – Great (but old) infographic with libraries by used technology.

• Bouncy Ball – Comparing animation techniques by showing how to bounce a ball with each one.

Libraries / CSS

• Animate.css – Collections of CSS animations.

• Effeckt.css – Collections of UI animations.

• Bounce.js – Tool for generate nice CSS keyframes animation from js easing function.

• Animations.css - Collection.

• Magic animations – Collection.

• UI buttons – Collection of buttons.

• Hover.css – Hover effects.

• Morf – Transitions with custom easing functions.

• Awesome CSS3 animations – Library of animations.

• All Animation – Set of fun animations to make your project sexier.

• CSS Animate – Tool for easy and fast creating CSS3 keyframes animation.

• Mantra – Tool for creating keyframes animation.

Libraries / JavaScript

• GreenSock – Ultra high-performance, professional-grade animation for the modern web.

• Velocity.js – Accelerated JavaScript animation.

• Impulse – High-performance interactions for mobile web.

• AniJS – Animations by declared data-attributes.

• Snabbt.js – Minimalistic animation library in JavaScript.

• Famo.us – High-performance JavaScript library for animations & interfaces.

• Processing.js – JavaScript library for Processing visual programming language.

• Framer.js (⭐5.7k) – Prototyping tool for designing UI, interaction and animation.

• Dynamics.js – JavaScript library to create physics-based animations.

• Mo.js (⭐18k) – Motion graphics toolbelt for the web.

• AnimateTransition – Library for transition of blocks and popups.

• Animate Plus (⭐5.9k) – CSS and SVG animation library for modern browsers, performant and lightweight (3KB gzipped), making it particularly well-suited for mobile.

• Gravitas.js (⭐161) – Super fast physics simulations for JavaScript.

• Popmotion – JavaScript motion engine that makes creating engaging user interactions quick and simple.

• anime.js - Lightweight JavaScript animation library.

Libraries / SVG

• BonsaiJS – Lightweight graphics library with intuitive graphics API and SVG renderer.

• Vivus.js – Allows you to animate SVGs, giving them the appearence of being drawn.

• Walkway.js – Easy way to animate SVG images consisting of line, path, and polyline elements.

• Transformicons – Animated icons, symbols and buttons using SVG and CSS.

Web animation performance / SVG

• Jankfree.org – Collection of articles and presentations about browser performance.

• High performance animations.

• How to Create Smoother Animations and Transitions in the Browser.

Speeches, presentations, videos / SVG

• Interface Animations (Mark Geyer) – Workshop on BlendConf 2014.

• The future of UX – Animation on the Brain (Rachel Nabors).

• Designing Complex SVG Animations (Sarah Drasner, Trulia).

• Designing with animation (Pasquale D'Silva) (🎥 video).

• Animating Web Experiences (John Allsopp) (🎥 video).

• Putting Your UI in Motion (Val Head) (🎥 video).

• Motion design with CSS (Val Head) (🎥 video).

• Lets move! (Benjamin De Cock, Stripe) (🎥 video).

• Animating Your UX (Rachel Nabors) (🎥 video).

• Styling and Animating Scalable Vector Graphics with CSS (Sara Soueidan) (🎥 video).

• Animating the User Experience (Rachel Nabors) (🎥 video).

• Designing meaningful animation (Val Head) (🎥 video).

• Functional Animation (Sarah Drasner) (🎥 video).

Guidelines / SVG

• Android
  • Material design guidelines: Motion

Books / SVG

• The Web In Motion: Practical Considerations For Designing With Animation by Smashing Magazine.

• Motion Design for iOS by Mike Rundle.

• Animation in HTML, CSS, and JavaScript.

• Futureproof Web Design Techniques. Interaction Design & Complex Animations by @UXPin.

• CSS animations by @valhead.

5. Awesome Embedded Rust

no-std crates / WIP

• OxCC (⭐18): A port of Open Source Car Control written in Rust

6. Awesome Hacking Locations

United States 🇺🇸 / Washington

Ironclad Coffee

Lots of small and large tables, free fast wifi, plenty of power, and some of the best coffee in Richmond.

Webpage: https://ironcladcoffee.com/

7. Awesome Creative Coding

Visual Programming Languages

• cables [Cross-platform/Web] - Your model kit for creating beautiful interactive content. Currently in private beta, invites can be requested.

8. Awesome Speakers

Europe / France 🇫🇷

Lille

Emmanuel Demey
Topics: Angular, JavaScript, Progressive Web Apps, Vue, React, Elasticsearch
https://twitter.com/EmmanuelDemey

North America / Canada 🇨🇦

Montréal

Aurélien Loyer
Topics: JavaScript, Angular, Vue.js, Node.js, TypeScript, IoT
https://twitter.com/AurelienLoyer

• Prev: Sep 28, 2018
• Next: Sep 26, 2018