Skip to main content

Animation Enhancement

Content alternation and smooth transitions between HMI elements.

Draft

This documentation is a draft and will be updated after testing.

Overview​

TOR Reference: 3.1.1.10

Animation enhancement allows alternating between different content types (Video, Banner, Image) with smooth transitions. This creates dynamic displays that cycle through multiple content sources.

Content Alternation​

Multiple elements can be grouped together to alternate display:

PropertyDescription
Alternation Group IDGroup identifier
Alternation IntervalTime between switches (seconds)
Transition EffectFade, Slide, or None
Transition DurationAnimation duration (ms)

Supported Content Types​

Elements that can participate in alternation:

  • Video elements
  • Banner elements
  • Image elements
  • Static content

Transition Effects​

EffectDescription
FadeSmooth crossfade using opacity
SlideSlide out/in animation
NoneInstant content switch

Configuration in xDraw​

  1. Select elements to alternate
  2. Assign same Alternation Group ID
  3. Set Alternation Interval
  4. Choose Transition Effect
  5. Set Transition Duration

Technical Implementation​

GSAP Integration​

Animations use GSAP (GreenSock Animation Platform) for smooth transitions:

// Fade transition example
gsap.to(currentElement, {
  opacity: 0,
  duration: transitionDuration / 1000,
  onComplete: () => {
    gsap.to(nextElement, {
      opacity: 1,
      duration: transitionDuration / 1000
    });
  }
});

Cleanup​

Alternation timers are automatically cleared when navigating away from HMI pages to prevent memory leaks.