Miss any of our Open RFC calls?Watch the recordings here! »

flip-toolkit

7.0.13 • Public • Published

flip-toolkit

Minified & Gzipped size MIT license npm version

Using Vue.js ? Try vue-flip-toolkit.

Basic Example

Fork this example on CodeSandbox

import { Flipper } from 'flip-toolkit'
const container = document.querySelector('.container')
const square = document.querySelector('.square')
const innerSquare = document.querySelector('.inner-square')
 
const flipper = new Flipper({ element: container })
 
// add flipped children to the parent
flipper.addFlipped({
  element: square,
  // assign a unique id to the element
  flipId: 'square',
  onStart: () => console.log('animation started!'),
  onSpringUpdate: springValue =>
    console.log(`current spring value: ${springValue}`),
  onComplete: () => console.log('animation completed!')
})
 
// to add an inverted child
// (so that the text doesn't warp)
// use this method with
// a reference to the parent element
flipper.addInverted({
  element: innerSquare,
  parent: square
})
 
square.addEventListener('click', () => {
  // record positions before they change
  flipper.recordBeforeUpdate()
  square.classList.toggle('big-square')
  // record new positions, and begin animations
  flipper.update()
})

To learn more about which configuration options are available, check out the code for the Flipper class here or read the docs for react-flip-toolkit

Spring

flip-toolkit also exports a utility function, spring, that can be used to orchestrate non-FLIP animations.

Fork this example on CodeSandbox

import { spring } from "flip-toolkit";
 
const container = document.querySelector(".container");
const squares = [...container.querySelectorAll(".square")];
 
squares.forEach((el, i) => {
  spring({
    config: "wobbly",
    values: {
      translateY: [-15, 0],
      opacity: [0, 1]
    },
    onUpdate: ({ translateY, opacity }) => {
      el.style.opacity = opacity;
      el.style.transform = `translateY(${translateY}px)`;
    },
    delay: i * 25,
    onComplete: () => {
      // add callback logic here if necessary
    }
  });
});

Install

npm i flip-toolkit

DownloadsWeekly Downloads

16,706

Version

7.0.13

License

MIT

Unpacked Size

58.7 MB

Total Files

2001

Last publish

Collaborators

  • avatar