A Performant Transitions and Animations Library

  • By H5BP
  • Last update: Jan 2, 2023
  • Comments: 11

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:

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

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

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

Getting Started

Code Style Guide

General Inquiries & Support

Bug Reports & Feature Requests

Github

https://github.com/h5bp/Effeckt.css

Comments(11)

  • 1

    naming and github org

    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.

  • 2

    HTML Includes

    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?
  • 3

    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.

  • 4

    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.

  • 5

    Added JSCS & JSHint with Travis CI config

    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:

  • 6

    Effects resources

    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

    Modals

    Page transitions

    Other

  • 7

    Create an Effeckt.js module/core

    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.

  • 8

    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.

    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.

  • 9

    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.

  • 10

    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.

    screen-shot-2013-07-05-at-5 04 13-pm

  • 11

    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:

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