refactor: remove outdated animation examples for confetti and keyframe animations; streamline code in Vue components for improved performance and maintainability

Author: hairyf

docs/examples/gsap/demo/animation_confetti.ts

@@ -21,6 +21,7 @@ interface Dot {
 
 const dots = ref<Dot[]>([])
 let dotIdCounter = 0
+let timeline: gsap.core.Timeline | null = null  
 
 const textFilter = new DropShadowFilter({
   color: 'black',
@@ -57,7 +58,7 @@ function animateDot(dotRef: GraphicsElement, dot: Dot) {
     scale: 0,
   })
 
-  gsap
+  timeline = gsap
     .timeline({
       onComplete: () => {
         const index = dots.value.findIndex(d => d.id === dot.id)
@@ -97,6 +98,7 @@ useEventListener(stage, 'click', (event) => {
 
 onUnmounted(() => {
   dots.value = []
+  timeline?.kill()
 })
 </script>
 

docs/examples/gsap/demo/animation_confetti.vue

@@ -54,7 +54,6 @@ onUnmounted(() => animation?.kill())
     container.y = screen.height / 2 - container.height / 2 + size / 2
   }">
     <graphics v-for="i in 4" :key="i" ref="boxes" :x="(i - 1) * 120" @effect="graphics => {
-      const size = 75
       graphics
         .roundRect(-size / 2, -size / 2, size, size, 8)
         .fill(0xED427C)