kyotohongaku / effeckt.css

UI-less, performant transitions & animations

Effeckt.css

UI-Less & 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

Issues or Feedback?

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

Work In Progress Demo Page

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

✭ Contributing & Pull Requests

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.

Please keep your commits targeted in a logical fashion in order to keep code review and merges as clean.

General CSS style guide:

• Two spaces
• Prefix classes with effeckt-

Tech

• 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)
• The demo page will use jQuery to manipulate classes, but ultimately the styles are just CSS

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
4. Run grunt dev to start watching for file saves & run a local web server at port 3000 (localhost:3000).
5. Probably make a local development domain, because the plan is to $.load in the different individual modules, so each module can be it's own .html file, and that won't work at a file:// URL.

Examples To Add

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

Goals

This library/framework would come with some goals:

1. It provides no UI of it's own. It's only hooks for transitions.
2. Designer-curated set of classy and reasonable effects. (no easeInBounce)
3. Establish browser support guidelines (I expect 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.

Action

• If you know other transition/keyframe animation based demos/experiments that make senes to include here, file a ticket.
• If you're interested in helping to define the API let's hear it, comment on that ticket
• A web-based builder is a must. A cmd-line builder isn't important for this, I'd say.