@itsy/animate
v0.0.9
Published
tiny animation tools
Downloads
25
Readme
@itsy/animate
tiny animation tools
/move
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
})
api
when
- will automatically call bothprep
andplay
, 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
/accordion
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 }
})
api
collapse
- sets the element'sstyle.height
to0px
and then animates the collapseexpand
- sets the element'sstyle.height
tonull
and then animates the expansionwhen
- will automatically call bothprep
andplay
, 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