Module Utilities

This modules aims to provide a few components and helpers for an easier and more seamless integration of Ionic's composables or functions in your app. We currently have the one IonAnimation component.

Components

IonAnimation component

This component makes using Ionic's createAnimation easier. It matches the majority of props directly to the usual Ionic animation object, to make adoption easier.

For more information, see official Ionic docs or check out the playground examples

You can see how it replaces usage of the regular createAnimation function in the code example below:

IonAnimation
<template>
  <IonAnimation
    :duration="3000"
    :iterations="Infinity"
    :keyframes="[
      { offset: 0, background: 'red' },
      { offset: 0.72, background: 'var(--background)' },
      { offset: 1, background: 'green' },
    ]"
    playOnMount
  >
    <!-- Content to animate -->
  </IonAnimation>
</template>
Manual usage
<script setup lang="ts">
// Template ref of your element
const squareRef = ref()

// Your animation object
const animation = createAnimation()
  .addElement(squareRef.value)
  .duration(3000)
  .iterations(Infinity)
  .keyframes([
    { offset: 0, background: 'red' },
    { offset: 0.72, background: 'var(--background)' },
    { offset: 1, background: 'green' },
  ])

onMounted(() => {
  animation.play()
})
</script>
Currently component doesn't support grouped and chained animations. For that usage we still recommend using createAnimation by itself
Edit this page on GitHub