qbal - QuickBooks Animation Library

The QuickBooks Animation Library is a solution to add QuickBooks motion to your product, page, or feature. Our motion is natural, guiding, and calm.

This is one approach to implementing and systematizing motion on the web. If you are an Intuit employee, refer to our design system for more detail on motion principles, motivation, and rationale.

Demos + Docs + Examples 👈 👈  😀 🎉

Challenges

• Creating consistent QuickBooks style animation across marketing and product web experiences
• Designers and developers collaborating on motion without working code examples

Approach

• Ready-to-use QuickBooks motion styles that can be applied with CSS classes or SCSS mixins
• Semantic mappings that make it clearer which animations to use and provide a path to updating specific animations (like qbal-trowserModal-enter) by updating the library
• Detailed examples show exactly what animations look like to help designers and developers collaborate
• Includes:
  • Entrance & exit animations for various UI elements (modals, dialogs, tooltips, etc.)
  • Transitions classes for height, width, opacity, and color
  • Plus more! See all examples 👀

Library structure

_qbal-variables.scss defines timing, easing, and property values to animate

_qbal-keyframes.scss builds the CSS keyframes needed for specific animations

_qbal-animation-classes.scss defines the cores set of generic animations

_qbal-semantic-classes.scss defines semantic mappings for entrance and exit animations for specific components

The 4 above files can be included via _qbal-mixins.scss and then used as mixins, or developers can use the CSS classes generated from qb_animation_library.scss.

Usage

Usage as CSS

1. Download qb_animation_library.css

2. Link to it in your HTML
   <link rel="stylesheet" href="path/to/qb_animation_library.css">

3. Start adding classes:
   <div class="qbal-fade-enter"> ... </div>

Usage as SCSS

1. Clone repository or download as ZIP

2. Copy /scss folder to your project

3. Import qbal mixins into your scss:
   @import "qbal-mixins";

4. Start including mixins in your scss (mixin names are the same as the class names above):

   .my-tooltip {
     @include qbal-tooltip-enter;
   }

Usage as Styled Components

1. npm install --save styled-components (if you haven't already)

2. npm install --save qb-animation-library

3. Then in your React component...

   To use any existing named animation:

     import styled, { keyframes, css } from "styled-components";
     import { fade_enter } from "qb-animation-library";
   
     const Container = styled.div`
       ${fade_enter(css, keyframes)}
     `;

   To use any animation variables like keyframes and easing curves:

     import styled, { keyframes, css } from "styled-components";
     import { animationVariables as animVars } from "qb-animation-library";
     
     const upEnterKf = keyframes`${animVars.keyframes_UpEnter}`;
     const fadeInKf = keyframes`${animVars.keyframes_FadeEnter}`;
     const styles = css`
       animation: ${upEnterKf} 2s ${animVars.ease_spirited_entrance},
                  ${fadeInKf}  1s ${animVars.ease_slow};
     `;
     const Container = styled.div`
       ${styles}
     `;

   See available animation variables in styled-components/animation-variables.js

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Development setup

• Clone repository and install

  git clone git@github.com:intuit/qb-animation-library.git
  cd qb-animation-library/
  npm install

• To build CSS

  npm run build

• To build CSS when SCSS files change

  npm run watch

• To build CSS when SCSS files change & launch dev http server

  npm run dev

  Then open http://localhost:8080/ in your browser

• To generate styled-components from tools/generate-styled-components.js

  npm run generate-styled-components