Skip to content

Latest commit

 

History

History
87 lines (68 loc) · 27.6 KB

README.md

File metadata and controls

87 lines (68 loc) · 27.6 KB

barba.js [v2]

stability-wip CircleCI Coverage Status Commitizen friendly Conventional Commits lerna License All Contributors Slack channel

Invite link to slack channel

Barba is a small (7kb minified and compressed) and easy-to-use library that helps you creating fluid and smooth transitions between your website's pages.

It helps reducing the delay between your pages, minimizing browser HTTP requests and enhancing your user's web experience.

This is beta version, use it at your own risks! 😱
Thanks in advance for reporting bugs. #sharethelove 😊

Looking for v1? 👈

What's new?

  • Simplified API
  • Hook sytem for transitions and views
  • Transition resolution: declare your transitions and let Barba pick the right one
  • Use of data-barba attributes
  • Sync mode
  • Plugin system
    • @barba/router: use of routes for transition resolution
    • @barba/css: automatic addition of CSS classes
    • @barba/prefetch: automatic pages prefetching (and caching), based on viewport
    • @barba/head: update your <head> (coming soon)
    • @barba/transition: ready-to-use basic transitions pack (fade, slide, …) (coming soon)

Main changes (TL;DR)

  • Barba container and wrapper now use data-barba attribute
  • Same for namespace via data-barba-namespace
  • 2 main methods: barba.init() and barba.use() (for plugins)
  • Transitions:
    • are plain JS objects
    • are declared via the barba.init({ transitions })
    • use "hooks" corresponding to animation steps
      • hooks can be synchronous or asynchronous (via this.async() or promise based)
      • all hooks receive same data argument
    • use "rules" to select which transition to use
      • default rules are namespace and custom
      • @barba/router adds route rule
      • they can be combined within from and to properties
  • Views:
    • are plain JS objects
    • are declared via the barba.init({ views })
    • use a subset of animation "hooks":
      • beforeAppear, afterAppear, beforeLeave, afterLeave, beforeEnter, afterEnter
      • receive the same data argument
  • Sync mode will start leave and enter transitions concurrently

Documentation

How to contribute

If you want to report a bug or if you just want to request for a new feature/improvement, please follow those instructions before.

Thanks for taking time to contribute to Barba 🎉 👍

Contributors

Next steps

  • CI setup (PR, publish, …)
  • Write manual documentation
  • Generate code documentation
  • Testing, debugging, fixing, testing…
  • e2e testing suite
  • New website