Flipping (beta)
A tiny library (and collection of adapters) for implementing FLIP transitions easily. Still in beta! Expect the API to change slightly before v1.0.
For more information about the FLIP technique, view the FLIPping slides.
Quick Start
npm install flipping --save
Or grab the files directly:
- https://unpkg.com/flipping@latest/dist/flipping.js (core)
- https://unpkg.com/flipping@latest/dist/flipping.web.js (WAAPI adapter)
- https://unpkg.com/flipping@latest/dist/flipping.gsap.js (GSAP adapter)
// import Flipping from 'flipping/strategies/web';// import Flipping from 'flipping/strategies/gsap';; const flipping = ; // or, for example:// const flipping = new Flipping({// onFlip: (state) => doYourAnimation(state)// }); // ...flipping; ; // anything that changes the layout flipping;
<!-- first view --> <!-- second view --> Lorem ipsum dolor sit amet...
API
Coming soon! For now, take a look at some of these examples: