Performant Transitions & Animations

Ever notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?

Designing and developing UIs for the mobile web is tricky, but it's extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.

@daneden did really nice work with Animate.css but I think the web would benefit if we could take that work to the next level. There's already been fantastic experiments and demos exploring CSS-based transitions, but it's distributed all over.

Originally started at h5bp/lazyweb-requests#122

Head here → https://github.com/h5bp/Effeckt.css/issues

Head here → https://h5bp.github.io/Effeckt.css/dist/

If you'd like to contribute to the Effeckt.css project (btw you're awesome for doing so) then we suggest you do the following…

1. Fork this Repo
2. Create a new branch on your forked copy of this project.
3. Submit your branch to this repo as a PR.
4. Wait for unicorns to appear.

❗ A Note Regarding Pull Requests : Please keep your commits targeted and in a logical fashion in order to keep code review and merges as clean as possible. Generally commits shouldn't be a "save" for authors. Multiple commits sent via a PR can also create chaos when doing something like a git bisect later on. Rebasing commits from a repo where other contributors have acces can cause major conflicts for those tracking the project through a fork.

• How to rebase your commits before submitting a PR: https://gitready.com/advanced/2009/02/10/squashing-commits-with-rebase.html

• Two spaces
• Prefix classes/variables with effeckt-
• Data attributes can be data-effeckt or prefixed with that

• Sass
• Node and npm so we can...
  1. Use Grunt
  2. Grunt will process .scss on file saves
  3. Grunt will run autoprefixer
  4. Grunt will LiveReload the browser (style injection, you'll need the browser extensions)
• jQuery manipulates the classes used for the effects.

You'll have to:

1. Fork the project and pull down your copy
2. Run npm install
3. Make sure you have the Grunt command-line interface with npm install -g grunt-cli or alternatively sudo npm install -g grunt-cli if you encounter permissions issues
4. Run grunt dev to start watching for file saves & run a local web server at port 8000 (localhost:8000).

Here's a few pieces of excellent work:

• tympanus.net/Development/ModalWindowEffects/
• tympanus.net/Development/PageTransitions/
• tympanus.net/Development/PFold/index2.html
• leaverou.github.io/animatable/
• lab.hakim.se/ladda/
• lab.hakim.se/kontext/
• lab.hakim.se/avgrund/
• lab.hakim.se/meny/

Because there are so many, I expect we could group things by role:

• button/touch effects
• state transition
• modal/notification transition
• attention attractors

This library/framework would come with some goals:

1. It provides very little UI. It's only hooks for transitions/animations.
2. Designer-curated set of classy and reasonable effects. (no easeInBounce)
3. Establish browser support guidelines (e.g. Android 2.3 would gracefully degrade)
4. CSS performance regression testing (a la bench.topcoat.io)
5. Deliver jank-free 60fps performance on target browsers/devices
6. If a particular effect cannot deliver target performance (hey blur() css filter), it cannot be included.
7. Guidelines on what to avoid when styling these affected elements (avoid expensive CSS)
8. Deliver a builder so users can pull only the CSS they need.
9. There is no hover on the mobile web, so any hover-based effects would be excluded or have a tap-based equivalent.

• If you know other transition/animation based demos/experiments that make sense to include here, file a ticket.
• If you're interested in helping to define the API, let's hear it! File a ticket.
• A web-based builder is a must. A command-line builder isn't important for this.