@frankhoodbs/number-animation-cmp-gsap NPM

Number Animation Gsap Cmp

Component that creates an animation on a displayed number using gsap.

Version License

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>

gsap vue

@everything-registry/sub-chunk-340

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago