Synchronized LeftiumLogo Animation

All LeftiumLogo instances now share a single global animation state. Click any logo or use the controls below to affect ALL logos simultaneously!

Global Animation Controls

Global Toggles: 0

Manual Drops: 0

Different Sizes

Large (300px)
Medium (200px)
Small (100px)
Tiny (50px)

Different Bounding Boxes

Square
Default
Cropped
Encircled

Custom onClick Callbacks

Prevents Default
Logs to Console

Test Instructions:

  • Click any logo - All logos will toggle animation state together
  • Use global controls - Buttons affect all logos simultaneously
  • Manual Drop All - Creates ripples on all logos with a wave effect
  • Check browser console - Some logos have custom onClick callbacks that log
  • Notice perfect synchronization - All animations start/stop together

Technical Implementation:

All LeftiumLogo instances now share a simple variable and control functions exported from the component's module. This eliminates the need for DOM event coordination and provides true reactive synchronization across all instances.