In this tutorial, you will learn how to achieve automatic height animation of content in a Vue 3 application using GSAP. This technique enables smooth and elegant animations when the height of a container dynamically changes based on its child elements.
Integrate a container with references into your Vue 3 components.
Here, you'll see how to create a container within your Vue 3 component that contains references to two elements: the outer container itself and the inner content area. This structure is used to adjust the container's height based on the content's height.
<template>
<div ref="container">
<div ref="content">
<!-- YOUR CONTENT -->
</div>
</div>
</template>
Add this script to animate the content's height.
This script demonstrates how you can automatically adjust the container's height to match the content's height as the content changes. By utilizing Vue 3 reactivity and the ResizeObserver from "@vueuse/core", changes in the content's height are monitored. Upon a change, the GSAP animation library is employed to smoothly animate the container's height, achieving a fluid height adjustment.
<script setup>
import { onMounted, ref } from 'vue';
import { gsap } from 'gsap';
import { useResizeObserver } from "@vueuse/core";
const container = ref(null);
const content = ref(null);
onMounted(() => {
// Use useResizeObserver to monitor height changes of the child element
useResizeObserver(content, (entries) => {
// Animate the container element's height change using GSAP
if (container.value) {
gsap.to(container.value, {
height: entries[0].contentRect.height,
duration: 0.5,
});
}
});
});
</script>