tiny animation tools
moves elements using FLIP transforms and the Web Animations API
import { Move } from '@itsy/animate/move'
const myElement = document.querySelector('[data-my-element]')
const move = new Move(myElement)
move.when(() => {
// something that causes myElement to shift position on the page
})when- will automatically call bothprepandplay, will return a Promise that resolves the value returned by the callbackprep- stores the initial position of the elementplay- stores the final position of the element then runs the move animation
expands and collapses an element
import { Accordion } from '@itsy/animate/accordion'
const myElement = document.querySelector('[data-my-element]')
const accordion = new Accordion(myElement)
accordion.when(() => {
myElement.classList.toggle('h-0') // css example -> .h-0 { height: 0 }
})collapse- sets the element'sstyle.heightto0pxand then animates the collapseexpand- sets the element'sstyle.heighttonulland then animates the expansionwhen- will automatically call bothprepandplay, will return a Promise that resolves the value returned by the callbackprep- stores the initial position of the elementplay- stores the final position of the element then runs the expand/collapse animation