Small JS Library For FLIP Transitions – Flipping.js

Preview:

Description:

Flipping.js is a small JavaScript library to implement the FLIP (First, Last, Inverse, Play) animations with ease.

How to use it:

Install it via NPM:

npm install flipping --save

Or include the library directly in the document:

<!-- Core -->
<script src="https://unpkg.com/flipping@latest/dist/flipping.js"></script>
<!-- For Web Animation API -->
<script src="https://unpkg.com/flipping@latest/dist/flipping.web.js"></script>
<!-- For GSAP Library -->
<script src="https://unpkg.com/flipping@latest/dist/flipping.gsap.js"></script>

Create a new Flipping instance.

<!-- 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>

const flipping = new Flipping({
    selector: () => document.querySelectorAll('[data-flip-key]'),  
    duration: 300,  
});

Perform the animation.

flipping.flip();

Changelog:

07/14/2018

• Update