@frankhoodbs/number-animation-cmp-gsap
v1.2.8
Published
Number Animation component using GSAP
Downloads
354
Keywords
Readme
Number Animation Gsap Cmp
Component that creates an animation on a displayed number using gsap.
Libraries Docs for config
Gsap from properties: https://gsap.com/docs/v3/GSAP/gsap.from()#special-properties
Props
| Name | Type | Description |
|:-----------------------|:----------|:--------------------------------------------------------------------------------------------------------------|
| data-start-value
| number
| Required Starting value of the number. |
| data-end-value
| number
| Required Ending value of the number. |
| data-start-animation
| boolean
| Boolean to control the timing of the start of the animation, defaults to true so animation starts immediatly. |
| data-step
| number
| Controls the increment on each step of the animation, defaults to 1. |
| data-duration
| number
| Defines the duration of the animation (seconds), defaults to 5s |
| data-ease
| string
| Defines the easing of the animation using gsap's easing options, defaults to 'none' |
Slots
| Name | Props | Description |
|-----------|--------|----------------------------------------------|
| default
| number | Slot that autofeeds the number to be printed |
Usage/Examples
<div class="container">
<number-animation-cmp-gsap
:data-duration="8"
:data-step="1"
data-ease="power1.in"
:data-start-value="0"
:data-end-value="100000000"
>
<template #default="{ number }">€ {{ number.toFixed(2) }}</template>
</number-animation-cmp-gsap>
<number-animation-cmp-gsap
:data-duration="10"
:data-step="0.01"
data-ease="power1.in"
:data-start-value="0.0"
:data-start-animation="uela"
:data-end-value="100.0"
>
<template #default="{ number }">{{ number }} Kb</template>
</number-animation-cmp-gsap>
</div>