Download Button Animation

Project Overview: Animated Download Button

This project is a high-fidelity, interactive download button that uses playful animations to represent the file-transfer process. Instead of a standard loading bar, it features an arrow that transforms into a parachuting icon, "falling" toward a line that reacts with elastic physics. It provides clear user feedback through a live percentage counter and a final transition to a "Complete" state.

The interface is built using HTML for structure, CSS for layout and styling, and the GSAP (GreenSock Animation Platform) library for the complex motion logic. The button's visuals are primarily SVG (Scalable Vector Graphics), which allows the shapes to stretch and morph smoothly without losing quality.

How It Works

The button relies heavily on CSS custom properties (variables) to manage its state. These variables control everything from the arrow's rotation to the parachute's visibility. By updating these variables via JavaScript, the developer can animate multiple properties simultaneously.

.dl-parachute {
  --arrow-y: 2px;
  --arrow-r: 0deg;
  --parachute-o: 1;
  --line-progress: 260px;
}

These CSS variables act as "control knobs" that JavaScript can turn to change the button's appearance during the animation.

When a user clicks the button, a GSAP timeline is triggered. This timeline sequences several animations: it morphs the initial circular border into a flat line, launches the arrow upward, and then slowly lowers it back down as the percentage increases. The MorphSVGPlugin is used to seamlessly transition one SVG path into another, such as turning the download arrow into a checkmark at the end.

gsap.timeline().to(circle, {
    morphSVG: 'M10 120.5C11.5 120.5 29.1914 120.5 61.5 120.5...',
    duration: .15
})

This snippet shows the GSAP timeline morphing the circular border into a horizontal line path.

To make the animation feel organic, the project uses a JavaScript Proxy to watch for changes in a coordinate value. When the value changes, it calls a custom function to redraw the SVG line, creating a "bouncing" effect when the arrow lands.

set(target, key, value) {
    target[key] = value;
    if (target.y !== null) {
        button.querySelector('.line').innerHTML = getPath(target.y, .2);
    }
    return true;
}

The Proxy automatically updates the line's shape whenever the 'y' coordinate changes, ensuring the "elastic" bounce looks realistic.

Finally, the project uses a numeric counter that updates from 0 to 100. This is synchronized with the "parachute" descent, giving the user a visual representation of the download progress before the final "Complete" message appears.

.to(count, {
    number: 100,
    roundProps: 'number',
    duration: 3,
    onUpdate: () => number.innerHTML = count.number
})

This part of the code handles the logic for counting from 0% to 100% over a three-second duration.