Tracing Beam

A Vue component that creates an animated tracing beam effect alongside content.

Usage

Props

PropDescription
triggerElementSelector for the scrollable element. Defaults to window if not provided.
classAdditional CSS classes to apply to the component.

Slots

SlotDescription
defaultContent to be displayed alongside the tracing beam.

How it Works

  1. The component renders a container with a decorative SVG path and a dot.
  2. It uses GSAP and ScrollTrigger to animate the gradient of the SVG path based on scroll position.
  3. The animation creates a "tracing" effect that follows the user's scroll progress.
  4. The component adapts to the height of its content automatically.

Customization

You can customize the TracingBeam component in several ways:

  • Modify the class prop to add custom styles or utility classes.
  • Adjust the SVG path, colors, or dimensions in the component's template for different visual effects.
  • Change the GSAP animation parameters in the script section to alter the animation behavior.

Note

The TracingBeam component relies on GSAP and ScrollTrigger for animations. Ensure these libraries are properly installed and imported in your project for the component to function correctly. The component is designed to work with both window scrolling and custom scroll containers.

Text Reveal
A Vue component that reveals text with a smooth animation as the user scrolls.
TracingCurveContainer
A Vue component that creates an interactive 3D curved line animation with scroll-triggered content.