src/lib/components/StarTrace.svelte

<script lang="ts">

    // Svelte
    import { createEventDispatcher } from 'svelte'

	// Libs
	import { gsap } from "gsap";

	// Types
	import type { Star } from "$lib/types/Star";

	// Props
	export let star: Star;

    // Variables
    const dispatch = createEventDispatcher()

	function starAnimation(node: any) {
		let deltaX = star.end.x - star.start.x;
		let deltaY = star.end.y - star.start.y;

		gsap.to(node, {
			translateX: deltaX,
			translateY: deltaY,
            height: 4,
            width: 4,
            opacity: 0,
			scaleY: 100,
			duration: 1.5,
            backgroundColor: "white",
			ease: "power1.inOut",
            onComplete: () => {
                dispatch("remove", star);
            }
		});
	}
</script>

<div
	use:starAnimation
	class="absolute w-[2px] h-[2px] bg-blue-400 rounded-full rotate-45"
	style="top: {star.start.y}px; left: {star.start.x}px"
/>