Author: | davidkpiano |
---|---|
Views Total: | 689 views |
Official Page: | Go to website |
Last Update: | July 14, 2018 |
License: | MIT |
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/[email protected]/dist/flipping.js"></script> <!-- For Web Animation API --> <script src="https://unpkg.com/[email protected]/dist/flipping.web.js"></script> <!-- For GSAP Library --> <script src="https://unpkg.com/[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> <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