Effeckt.css README

The project's README from github.com/h5bp/Effeckt.css. As one markdown file: README.md.

This repo is archived

Effeckt.css

A Performant Transitions and Animations Library : http://h5bp.github.io/Effeckt.css

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

Effeckt Trailer

image

Examples To Add

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

Goals

  1. Provide a minimal UI. Only use style hooks for transitions and 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.

Action

Getting Started

Code Style Guide

General Inquiries & Support

Bug Reports & Feature Requests

Effeckt.css (h5bp/Effeckt.css)

Searching Database…

10.8K ·GitHub
Effeckt.css
archived
What is this?Effeckt.css is a performant transitions and animations library for the web, built on CSS transitions and keyframe animations chosen to hold 60fps on mobile devices.
How is it different from Animate.css?The author calls Animate.css really nice work and wants to take it further: a designer-curated set of classy UI transitions — modals, page shifts, state changes — with hard performance goals.
How do I add it to a project and use it?No documented install — the Getting Started section was left empty. The plan was a web-based builder that outputs only the CSS you need, with effects applied via minimal style hooks.
Is this project still being maintained?No. The repository is archived, so what you see is the final state — treat it as a 2013-era snapshot rather than a living library.
Which browsers and devices does it target?Mobile web browsers come first. Formal support guidelines were still to be established, with graceful degradation planned for old browsers like Android 2.3.
What happens to hover effects on mobile?Since the mobile web has no hover, hover-based effects are excluded from the set or get a tap-based equivalent.
Can I propose new effects or help with the API?Yes — the README invites tickets for transition demos worth including and for help defining the API, plus an Effeckt.css mailing list for general inquiries.
What are similar projects?skrollr, parallax, lax.js, simplefolio, Magnific-Popup, draggable, impress.js, interact.js
Which topics is it in?css3, animation, deprecated, css, browser, html, mobile, ui, web-development, performance, frontend, library
Creator
h5bp
Size
1.9 MB
Stars
10.8K
Updated
CommitMar 01
Age
13y
Commits · 90 Days