Approach Animation Demo

This project demonstrates the new “approach” animation that responds to page scroll by moving the 3D model from its original position toward the center (0,0,0) as you scroll down the page.

How It Works

The approach animation:

1. Starts at Original Position: The model begins at a configured original position (in this case: x=3, y=2, z=1)
2. Tracks Page Scroll: Monitors the total scroll progress of the page (0% to 100%)
3. Interpolates Position: Smoothly moves the model from the original position to (0,0,0) based on scroll progress
4. Scroll-Responsive: The animation is directly tied to your scroll position - scroll up to move back, scroll down to approach center

Configuration

This page uses the following configuration:

webgl:
  wireframe:
    originalPosition:
      x: 3    # Start 3 units to the right
      y: 2    # Start 2 units up
      z: 1    # Start 1 unit forward
  animations:
    defaultAnimations:
      - name: "approach"
        type: "approach"
        intensity: 1.0  # Full effect strength
      - name: "rotate"
        type: "rotate"
        speed: 0.3
        intensity: 0.4

Technical Details

Scroll Progress Calculation:

• Uses window.scrollY divided by total scrollable height
• Normalized to 0-1 range for consistent behavior
• Works with pages of any length

Position Interpolation:

• Linear interpolation: originalPos * (1 - scrollProgress)
• At 0% scroll: model at original position
• At 100% scroll: model at center (0,0,0)
• Smooth transition between these points

Intensity Parameter:

• Controls the strength of the approach effect
• intensity: 1.0 = full effect
• intensity: 0.5 = model only moves halfway to center
• intensity: 2.0 = model overshoots center (can create interesting effects)

Interactive Features

• Scroll to See Effect: Scroll down this page to watch the model approach the center
• Combined Animations: The approach animation works alongside rotation and other effects
• Mouse Tracking: Desktop mouse movement still affects rotation
• Theme Responsive: Colors adapt to light/dark theme

Use Cases

The approach animation is perfect for:

• Landing Pages: Draw attention to the center as users scroll
• Storytelling: Create a sense of journey or progression
• Product Showcases: Bring the product into focus as users engage
• Interactive Presentations: Guide viewer attention through scroll

Try scrolling up and down this page to see the smooth approach animation in action!

Additional Content

This section provides more content to enable scrolling and demonstrate the approach animation effect.

More Details

The approach animation represents a new paradigm in scroll-responsive 3D animations. Unlike traditional animations that are time-based, this animation is directly tied to user interaction through scrolling.

Benefits

• User-Controlled: Users control the animation speed through their scroll behavior
• Predictable: Same scroll position always results in same model position
• Smooth: No jarring transitions or sudden movements
• Accessible: Works with keyboard navigation and assistive technologies

Implementation Notes

The animation system calculates scroll progress by:

1. Getting current scroll position (window.scrollY)
2. Calculating total scrollable height (document.scrollHeight - window.innerHeight)
3. Normalizing to 0-1 range
4. Applying easing functions if configured
5. Interpolating between original and target positions

This creates a smooth, responsive experience that feels natural and intuitive to users.

Technical Benefits

The approach animation is designed for efficiency:

• Efficient Calculations: Simple linear interpolation with minimal overhead
• Memory Efficient: No additional geometry or textures required
• Smooth Operation: Consistent performance across all device types
• Clean Integration: Works seamlessly with other animation types

The animation provides a smooth, responsive experience with minimal computational overhead.