Skip to content

Instantly share code, notes, and snippets.

@kwarkjes

kwarkjes/#Fronteers - Tobias - Animation & performace.md

Last active April 1, 2016 09:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kwarkjes/75676a6e9f8b0c8f7e19c32913eaf8a9 to your computer and use it in GitHub Desktop.
Save kwarkjes/75676a6e9f8b0c8f7e19c32913eaf8a9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
#Fronteers - Tobias - Animation & performace.md

Animation performance - Tobias Ahlin

  • Spinkit animations lib

  • animate with transition or with the animation prop

  • animation prop is a set of keyframes

  • opacity, transform, filter are GPU accelerated (use them)

    • don't use top use trasnalteX
    • don't use width use scaleX instead... and go on

  • Example: background animation:

    • use a psudo element and transition the opacity of it
    • box-shadow hover, create a psudo element much bigger and animate the opacity of the psudo elemment

  • will-change: effects start & end of the animation

  • use will-change tp prepare the browser for the animation

  • Resorces:

    • FLIP - Paul Lewis
    • useyourinterface.com
    • cappativate.co
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment