You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP →
Socket
Socket
Sign inDemoInstall

qb-animation-library

Package Overview
Dependencies
0
Maintainers
3
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

qb-animation-library

The QuickBooks Animation Library is scalable, easy to use solution to add signature QuickBooks motion to your product, page, or feature.


Version published
Maintainers
3
Created

Readme

Source

qbal - QuickBooks Animation Library

CircleCI Auto Release npm npm

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
    

FAQs

Package last updated on 19 Mar 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc