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 bothprep
andplay
, will return a Promise that resolves the value returned by the callback -
prep
- stores the initial position of the element -
play
- 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 move = new Accordion(myElement)
accordion.when(() => {
myElement.classList.toggle('h-0') // css example -> .h-0 { height: 0 }
})
-
collapse
- sets the element'sstyle.height
to0px
and then animates the collapse -
expand
- sets the element'sstyle.height
tonull
and then animates the expansion -
when
- will automatically call bothprep
andplay
, will return a Promise that resolves the value returned by the callback -
prep
- stores the initial position of the element -
play
- stores the final position of the element then runs the expand/collapse animation