Order Button Animation

AI Overview: Order Button Animation

This project is an interactive web component that transforms a standard "Complete Order" button into a playful 3D animation. When a user clicks the button, it tips forward to reveal a hidden delivery truck. A package then drops into the truck, which drives across the length of the button before the interface flips back to display a "success" state with a checkmark.

The project is built using a combination of HTML for structure, CSS for 3D styling and layout, and the GSAP (GreenSock Animation Platform) library for the complex movement sequences. The button uses CSS custom properties (variables) to manage the positions and visibility of the truck parts, allowing JavaScript to update these values dynamically during the animation.

The animation logic is triggered by a click event listener. Once activated, GSAP coordinates multiple timelines: first, it scales the "box" and slides it into the truck; next, it animates the truck's horizontal movement; finally, it toggles CSS classes to switch the button text from "Complete Order" to "Order Placed."

Key Code Snippets

The HTML structure defines the button and the various div elements that represent the different parts of the delivery truck.

<button class="truck-button">
    <span class="default">Complete Order</span>
    <div class="truck">
        <div class="wheel"></div>
        <div class="back"></div>
        <div class="front"></div>
        <div class="box"></div>
    </div>
</button>

In the CSS, a 3D rotation is applied to the button when the "animation" class is added, flipping it to reveal the truck.

.truck-button.animation {
  --rx: -90deg;
  --br: 0;
}

The JavaScript uses GSAP to move the truck across the button by updating its horizontal "x" coordinates in a timed sequence.

}).to(truck, {
    x: 40,
    duration: 1
}).to(truck, {
    x: 20,
    duration: .6
}).to(truck, {
    x: 96,
    duration: .4
});

Finally, this snippet shows how the script resets the button's state, allowing the animation to be replayed if the user clicks it again after completion.

} else {
    button.classList.remove('animation', 'done');
    gsap.set(truck, {
        x: 4
    });
}