Flower Animation

AI Overview: Flower Animation

This project is an interactive web-based animation that depicts a botanical illustration "growing" dynamically on the screen. Using a detailed SVG (Scalable Vector Graphics) image, the project simulates the natural unfolding of flowers, stems, and leaves. It is designed as a high-quality decorative element, ideal for landing pages or digital art displays, featuring a sophisticated dark-themed aesthetic.

The project works by combining a complex SVG structure with the GSAP (GreenSock Animation Platform) library. The HTML file contains the vector data for every petal, stem, and leaf, while the CSS handles the initial layout and ensures all elements are hidden when the page first loads. The JavaScript then takes control, using a timeline to reveal these hidden elements in a specific, choreographed sequence that mimics organic growth.

Key Code Parts

1. Initial State Management
In the CSS, the project hides all the individual components of the flower using visibility: hidden. This allows the JavaScript to reveal them one by one during the animation.

#Footer_group_1_, [id^=PinkFlowerGroup], [id^=LeafGroup] path, path[id^=Stroke] {
  visibility: hidden;
}

2. Organizing SVG Elements
The JavaScript uses jQuery to select specific groups of SVG paths and organize them into arrays. This makes it easier to animate related parts—like all the stems or all the buds—at the same time.

var stemGroup1 = ['#Stem2_1_', '#Stem3_1_', '#Stem4_1_', '#Stem5a_1_', '#Stem5b_1_'];
var budGroup1 = ['#Bud3_1_', '#Bud6_1_'];

3. The Growth Logic
The core of the project is the GSAP timeline. It uses the drawSVG plugin to make lines appear as if they are being drawn in real-time and uses scale to make petals and leaves "pop" into existence from a specific starting point.

var tl = gsap.timeline()
    .fromTo(['#Stem16_1_', '#Stem1_1_'], { drawSVG: "0% 0%" }, { duration: 1.5, drawSVG: "0% 100%" }, 'start')
    .fromTo('#PinkFlowerGroup16_1_', { autoAlpha: 1, scale: 0, transformOrigin: '35% 110%' }, { duration: 2, scale: 1 }, 'flower1-=0.55');

4. Staggered Animations
To make the animation feel more natural, the code uses a "stagger" effect. This ensures that instead of all leaves appearing at once, they sprout one after another with a slight delay.

var stemVarsTo = { drawSVG: "0% 100%", duration: 2, stagger: 0.5 };
tl.fromTo(stemGroup1, stemVarsFrom, stemVarsTo, 'start+=0.1');