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.
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';
import Flipping from 'flipping';
const flipping = new Flipping();
// or, for example:
// const flipping = new Flipping({
// onFlip: (state) => doYourAnimation(state)
// });
// ...
flipping.read();
doSomething(); // anything that changes the layout
flipping.flip();<!-- first view -->
<section class="gallery">
<div class="photo-1" data-flip-key="photo-1">
<img src="/photo-1"/>
</div>
<div class="photo-2" data-flip-key="photo-2">
<img src="/photo-2"/>
</div>
<div class="photo-3" data-flip-key="photo-3">
<img src="/photo-3"/>
</div>
</section>
<!-- second view -->
<section class="details">
<div class="photo" data-flip-key="photo-1">
<img src="/photo-1"/>
</div>
<p class="description">
Lorem ipsum dolor sit amet...
</p>
</section>Coming soon! For now, take a look at some of these examples: