0.0.2 • Published 4 years ago
@tinypixelco/hoverfx v0.0.2
hoverFx
Declarative JS hover animations. Leverages anime.js.
Installation
yarn add @tinypixelco/hoverfx
Use
import hoverFx from '@tinypixelco/hoverfx'
hoverFx(document.querySelectorAll('[hoverfx]'))
<div hoverfx fx-duration="800" fx-on-scale="1.1" fx-off-scale="1"></div>
Attribute Syntax
All attributes begin with fx-
and can then be used on their own or modified by off
and/or on
(to target mouseenter
and mouseleave
, separately).
Example:
fx-duration="800"
will apply an 800ms animation duration to both off and on hover.fx-on-duration="800"
will apply an 800ms transition to hover on.fx-off-duration="800"
will apply an 800ms transition to hover off.
Supported attributes:
- bg-color
- color
- duration
- easing
- elasticity
- loop
- scale
- translate-x
- translate-y
Dependencies
- animejs