Interactive Emotional Feedback Slider

Forms are traditionally cold and utilitarian. This component challenges that norm by injecting emotional intelligence into the user interface. By mapping a range slider to animated character states, we transform a simple data input into a conversation. It turns the abstract concept of “satisfaction” into a relatable, human narrative, encouraging users to engage more deeply with the feedback process.

Core Technique

The engineering excellence here lies in the state-driven orchestration of GSAP timelines.

• SVG Geometry: The characters are built from simple SVG shapes (ellipse, path), grouped logically (eyes, mouth, limbs) to allow for independent manipulation.
• Timeline Switching: Instead of a single linear animation, the code defines three distinct gsap.timeline() instances: neg (Negative), neu (Neutral), and pos (Positive).
• The Runner Mechanism: The visual transition is handled by a .runner container that slides horizontally (x: n * -100 + 'vw'), physically moving the view to the relevant character while simultaneously triggering the specific timeline via play(0) and resetting the previous one.

Customization

You have full control over the emotional range. The background colors and animation speeds are decoupled, allowing for easy branding updates.

Adjusting Transitions

function updateView(n) {
    // Controls the slide speed between characters
    gsap.to('.runner', { duration: 0.5, x: n * -100 + 'vw' });
    
    // Background color mapping [Negative, Neutral, Positive]
    gsap.to('body', { 
        duration: 0.5, 
        background: ['#f27996', '#bdc5ff', '#a2f9d4'][+n + 1] 
    });
    // ... logic to play/pause timelines
}

Modifying Character Behavior

// Example: Making the "Positive" bounce faster
if (name === 'pos') {
    // duration: 0.4 -> 0.2 makes it more energetic
    tl.to('#Positive #body', { 
        duration: 0.2, 
        rotation: -10, 
        ease: 'sine.in' 
    });
    // ...
}

Browser Support

The component relies on standard SVG DOM manipulation and the GSAP library, ensuring high compatibility.