Developers Birthday Wish – Logical Python

style.css

#Footer_group_1_,
[id^="PinkFlowerGroup"],
[id^="BaseGroup"] path,
path[id^="Stroke"],
g[id^="BudGroup"] g[id^="BudGroup"] g[id^="Bud"],
[id^="Dots"],
[id^="Flourish"] {
    visibility: hidden;
}

Initial element visibility

Everything important starts hidden in CSS. The JS timeline reveals these pieces (autoAlpha/visibility) so the page loads without the artwork visible and the animation can reveal it in a controlled way.

Copy Code

@keyframes animation {
  0% { text-shadow: 0 0 20px #fefcc9, ... }
  100% { text-shadow: 0 0 20px #fefcc9, ... }
}
.fire { animation: animation 1s ease-in-out infinite alternate; }

Text flame/glow keyframes for celebratory text

Used to animate the “happy birthday” style text with a glowing/flame effect — a nice finishing visual touch independent of the SVG reveal.

script.js

Copy Code

var strokesLeftBottom = $("#LeftBottomGroup_1_ path[id^=Stroke]").toArray().reverse();
var strokesRightTop = $("#RightTopGroup_1_ path[id^=Stroke]").toArray().reverse();

Collect stroke/path elements into arrays

The code selects stroke paths with jQuery, converts to arrays and reverses them — preparing ordered lists for staggered drawSVG animations (so strokes appear in a natural sequence).

Copy Code

var tl = gsap.timeline()
  .set("#Footer_group_1_", { autoAlpha: 1 })
  .fromTo(["#Stem16_1_", "#Stem1_1_"], { drawSVG: "0% 0%" }, { duration:1.5, drawSVG:"0% 100%" }, "start")
  .fromTo("#BaseGroup16_1_ path", { autoAlpha:1, scale:0 }, { duration:1, scale:1 }, 1.2, "flower1")
  // ...many chained .fromTo(...) calls for stems, leaves, buds, strokes...

Master timeline that sequences everything

This is the central choreography: it drives the whole reveal, uses labels ("start", "flower1") to overlap sequences, and composes complex animation from many small steps.