1.2.3 • Published 6 days ago
@frankhoodbs/number-animation-cmp-gsap v1.2.3
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>
1.2.3
6 days ago
1.2.2
19 days ago
1.2.1
22 days ago
1.2.0
22 days ago
1.1.17
23 days ago
1.1.16
2 months ago
1.1.15
2 months ago
1.1.14
2 months ago
1.1.13
2 months ago
1.1.12
3 months ago
1.1.11
3 months ago
1.1.10
4 months ago
1.1.9
4 months ago
1.1.8
4 months ago
1.1.7
4 months ago
1.1.6
4 months ago
1.1.1
4 months ago
1.1.3
4 months ago
1.1.2
4 months ago
1.0.11
7 months ago
1.0.10
7 months ago
1.0.6
7 months ago
1.0.5
7 months ago
1.0.3
7 months ago
1.0.2
7 months ago
1.0.1
7 months ago
1.0.0
7 months ago