flip-toolkit

This library is suitable for use with Vanilla JS can be made to work with any JS framework. Try these framework-readyalternatives if you're using React or Vue:

• React-Flip-Toolkit
• Vue-Flip-Toolkit

Example 1: Expanding Div (Fork on Code Sandbox)

import { Flipper } from 'react-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!')
})

// to add an inverted child, 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()
})