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 })
flipper.addFlipped({
element: square,
flipId: 'square',
onStart: () => console.log('animation started!'),
onSpringUpdate: springValue =>
console.log(`current spring value: ${springValue}`),
onComplete: () => console.log('animation completed!')
})
flipper.addInverted({
element: innerSquare,
parent: square
})
square.addEventListener('click', () => {
flipper.recordBeforeUpdate()
square.classList.toggle('big-square')
flipper.update()
})
To learn more about which configuration options are available, check out the code for the Flipper
class here.
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: () => {
}
});
});