Animated Fruity Product Showcase

This is an Animated Fruity Product Showcase. It acts as a high-impact hero section for a product landing page. Its function is to create a sense of dynamic energy through synchronized GSAP animations, where product imagery “falls” into view, titles update with staggered transitions, and ripple-wave effects surround the navigation buttons.

Specs

• Weight: ~50 KB (GSAP dependency).
• Performance: High. Uses GSAP for all movement, keeping layout recalculations minimal during the transition between sections.
• Theming / Customization: Themes (Pear, Apple, Exotic) are mapped through arrays (h1Texts, logoColors, keyframes). Modifying these arrays updates the UI and animation behavior globally.
• Responsiveness: Robust. The component uses media queries to adjust font size and element offsets (e.g., image-one, image-two) to prevent clipping on smaller mobile screens.
• Graceful Degradation: Fails to a static view. Without JavaScript, the navigation between sections is disabled, and the animated entry of fruit images will not trigger.

Anatomy

The component manages a complex layer of absolutely positioned UI and background elements.

• HTML (The Skeleton): The main structure relies on a section-container that holds three distinct section panels. A text wrapper contains the central h1 and a decorative cane-image that acts as a container for image-based labels.
• CSS (The Skin): Uses a mix of flexbox for centering and absolute positioning to layer the fruit images behind the text. The wave effect uses @keyframes with box-shadow to simulate spreading ripples around the buttons.
• JS (The Nervous System): Manages a multi-stage state loop. When buttons are clicked, the script updates the left position of the sectionContainer, synchronizes the color changes, and fires GSAP from/to tweens to handle the entry and exit animations of the fruit imagery and text headers.

Logic

The core logic is “Data-Driven State Synchronization”:

// Button colors and animations
nextButton.style.color = logoColors[currentIndex + 1];
prevButton.style.color = logoColors[currentIndex - 1];
nextButton.style.animationName = keyframes[currentIndex + 1];
prevButton.style.animationName = keyframes[currentIndex - 1];

The script maintains arrays that link specific indices to colors, text, and CSS animation names. On every click, instead of writing manual if/else logic for every color state, the controller simply looks up the index in these arrays. This allows the developer to add a “Banana” or “Berry” section by simply adding one entry to the top-level arrays, without touching the functional animation logic.

Feel

Juicy and lively. The combination of the “wave” animation around the buttons and the falling motion of the fruit creates a sense of constant energy. The user feels as if they are browsing through a high-end, animated catalog where the interface itself participates in the “freshness” of the product.