This repo is archived
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
Examples To Add
Because there are so many, I expect we could group things by role:
- button/touch effects
- state transition
- modal/notification transition
- attention attractors
- Provide a minimal UI. Only use style hooks for transitions and animations.
- Designer-curated set of classy and reasonable effects. (no
- Establish browser support guidelines (e.g. Android 2.3 would gracefully degrade)
- CSS performance regression testing (a la bench.topcoat.io)
- Deliver jank-free 60fps performance on target browsers/devices
- If a particular effect cannot deliver target performance (hey
blur()css filter), it cannot be included.
- Guidelines on what to avoid when styling these affected elements (avoid expensive CSS)
- Deliver a builder so users can pull only the CSS they need.
- 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.
Code Style Guide
General Inquiries & Support
- Effeckt.css Mailing List https://groups.google.com/d/forum/effeckt
naming and github org
"Effeckt.css" I just randomly came up with. I'm not particularly attached to it, though it seemed pretty good. Renaming the project isn't a priority but if we want to, we certainly can.
The current github location of h5bp/Effeckt.css also need not be permanent. But if we move this to it's own org (probably inevitable) then let's do it with a final name.
Would be nice if each demo had it's own individual component page, and those chunks were included in the main demo page.
Overload of contents tends to slow down most animation
I don't now you guys but when I test some effects on the site if I am on "home" page, everything is slow because of the overload of contents, but if I am on a specify page everything run smoother.
Sass, LESS or vanilla CSS
Discussions about whether to use a pre-processor or vanilla CSS and if the former whether or not animations could or should be implemented as mixins or via an extension.
Added JSCS & JSHint with Travis CI config
This PR fixes https://github.com/h5bp/Effeckt.css/issues/314
"disallowSpaceAfterPrefixUnaryOperators":["++", "--", "+", "-", "~", "!"]
Style guidelines which do not have jshint / jscsc equivalents:
All the effect resources listed so far, any below if you know of any more . Lets get this down to a list of effect names to implement
Button / Touch effects
Create an Effeckt.js module/core
If Effeckt.js comprised of something like this (on a basic level, I prefer a UMD setup):
Of which can be extended with different modules or act on it's own, developers can include modules they like without having to call differently named Objects, and it offers an Object to bolt new functionality into.
Add JSHint and JSCS
To keep things clean. Preferably running as part of CI so we don't land PRs that aren't quite okay.
Off Screen Nav does not work on Android (4.2.2) stock browser.
This is a question or something I noticed.
On my Galaxy Nexus the off screen nav doesn't show. The only one that shows up is the 'push'-version, but also only if I force a repaint by switching to horizontal mode and back. After this I can also close it and it gets removed with the expected smooth animation.
I don't think it's an actual issue of Effeckt more an issue of Android in general. But I wanted to mention this cause it's not mentioned in the readme.md. It might be good to add this so people don't get confused and reporting issues about it :)
I switched to transition left/right, which is an ok fall-back.
Text Rendering on Modals
Text rendering changes when an element is animated to make the transition as smooth as possible. The problem is however after the animation ends the text is currently still rendering in the animation mode (text-rendering: optimizeSpeed I think.)
I was wondering how we were going to tackle this problem? As quality is obviously a important element for this project.
See blow screenshot below highlighting this problem.
How to Handle gh-pages / pull requests
For contributors, they will need to fork and submit pull requests to the master branch, but then the build process will update the gh-pages branch and that needs to be a separate pull request. That is kinda awkward.
Discussion so far:
git subtree push --dist origin gh-pages
Or, maybe general contributors don't need to worry about gh-pages? Team members will merge the pull requests into master and handle it?
Sorry if this is confusing. I'm confused myself. I just know we need to keep gh-pages updated too so the live demo is current.