While IonAnimation provides a declarative way to handle animations via props, the manual createAnimation approach is still required for complex logic, such as chaining animations or managing specific element references via template refs.
IonAnimation approach
Best for simple, single-sequence animations using props like :duration, :iterations, and :keyframes.
Manual createAnimation approach
Best for complex animations, grouped animations, or when you need fine-grained control over when the animation plays (e.g., inside onMounted).
<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>
