Small JS Library For FLIP Transitions – Flipping.js

Category: Animation , Javascript , Recommended | July 14, 2018
Author: davidkpiano
Views Total: 615 views
Official Page: Go to website
Last Update: July 14, 2018
License: MIT


Small JS Library For FLIP Transitions – Flipping.js


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="[email protected]/dist/flipping.js"></script>

<!-- For Web Animation API -->
<script src="[email protected]/dist/flipping.web.js"></script>

<!-- For GSAP Library -->
<script src="[email protected]/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 class="photo-2" data-flip-key="photo-2">
    <img src="/photo-2"/>
  <div class="photo-3" data-flip-key="photo-3">
    <img src="/photo-3"/>

<!-- second view -->
<section class="details">
  <div class="photo" data-flip-key="photo-1">
    <img src="/photo-1"/>
  <p class="description">
    Lorem ipsum dolor sit amet...
const flipping = new Flipping({
    selector: () => document.querySelectorAll('[data-flip-key]'),  
    duration: 300,  

Perform the animation.




  • Update

You Might Be Interested In:

Leave a Reply