Name

"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.

Github org

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.

1. Grunt includes https://github.com/vanetix/grunt-includes (never tried)
2. Jade includes (yet another dependency)
3. $.load with jQuery (might load janky)
4. PHP includes (yet another dependency)
5. Something else?

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.

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.

This PR fixes https://github.com/h5bp/Effeckt.css/issues/314

• .jshintrc
  • [x] Put brakes { after rule declarations/function name/while/for/etc. curly:true
• .jscsrc (Each completed task here has the corresponding jshint rule listed in code blocks)
  • [x] Use two space indent "validateIndentation": 2
  • [x] Put spaces between rule declarations/function name/while/for/etc and brakes {.requireSpacesInAnonymousFunctionExpression,requireSpacesInCallExpression,requireSpacesInConditionalExpression,requireSpacesInForStatement,requireSpacesInFunctionDeclaration,requireSpacesInFunctionExpression,requireSpacesInFunction,requireSpacesInNamedFunctionExpression
  • [x] Put spaces after : in property declarations/objects definitions. "requireSpaceAfterObjectKeys": true
  • [x] Use Spaces after and before ( and ) and [ and ]. "requireSpacesInsideParentheses":"all","requireSpacesInsideArrayBrackets": "all"
  • [x] Use Spaces after and before = assigning values. "requireSpaceAfterBinaryOperators":["="],"requireSpaceBeforeBinaryOperators":["="]
  • [x] Don't use spaces after unary operators such as ! or ++. "disallowSpaceAfterPrefixUnaryOperators":["++", "--", "+", "-", "~", "!"]
  • [x] Use space after , in arguments variable. "validateParameterSeparator":", "
  • [x] Declaring Objects using multi-line. "requireMultipleVarDecl":true
  • [x] Declaring variables using multi-line. "requireMultipleVarDecl":true
  • [x] Always use semicolons ;. "requireSemicolons":true
  • [x] put spaces after double slash. ("requireSpaceAfterLineComment":true)
  • [x] Any , must not have preceding space "disallowSpaceAfterBinaryOperators":[","],
  • [x] Use $ in front of a variable if it's a jquery object. requireDollarBeforejQueryAssignment:true
  • [x] General guidelines
    • [x] "disallowMixedSpacesAndTabs": true
    • [x] "disallowMultipleSpaces":true
    • [x] "disallowTrailingComma":true
    • [x] "requireLineFeedAtFileEnd":true

Style guidelines which do not have jshint / jscsc equivalents:

• When chained methods make long lines, divide each method on mutiple lines. Issue raised with JSCS
• Use double slash // for comments block Issue raised with JSCS
• ; must not have preceding space. Issue raised with JSCS

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

• tympanus.net/Development/PFold/index2.html
• leaverou.github.io/animatable/
• lab.hakim.se/ladda/
• http://tympanus.net/Tutorials/OriginalHoverEffects/index9.html - would work for Modal aswell
• http://tympanus.net/Development/CreativeButtons/

Modals

• tympanus.net/Development/ModalWindowEffects/
• lab.hakim.se/avgrund/

Page transitions

• tympanus.net/Development/PageTransitions/
• lab.hakim.se/kontext/
• lab.hakim.se/meny/

Other

• http://dabblet.com/gist/3715742

From a code reuse and modular perspective, I'd like to see some JavaScript modules (Patterns/AMD/UMD/whatever) over the singleton Objects - that allow for easy name-spacing and extensibility - plus out of the box functionality for developers for those who aren't great with JS.

If Effeckt.js comprised of something like this (on a basic level, I prefer a UMD setup):

(function (Effeckt) {

    // do something with Effeckt

})(this.Effeckt = this.Effeckt || {});

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.

To keep things clean. Preferably running as part of CI so we don't land PRs that aren't quite okay.

We have a style guide in the wiki but we tend to not follow it always. trailing commas, trailing whitespace and many other things are pretty common in the JavaScript codebase.

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 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.

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:

• @benschwarz git subtree push --dist origin gh-pages
• @doowb goes into more detail: https://github.com/h5bp/Effeckt.css/issues/24#issuecomment-20499827

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.