Run Animation on State Change

Sometimes you might want to run an animation after opening a popup or on a certain tab. This article will guide you through an example of running an animation when a certain tab is open in a popup.

Goal

In a slide where a tab group (fusion-tab-group) is inside a popup (fusion-popup), we want to run an animation on the first tab.

Getting the Code

Since this will require custom JavaScript code, we need to be able to access the source code. Either it can be done via the source code editor in Activator (/v2/document/{id}/source), or it can be downloaded as a source code package from Activator.

We will use the source code editor in Activator in this example.

In the example code below we assume that we have the following states:

• Popup-demo

• StateContainer-tab1

• StateContainer-tab2

Listening for State Changes

In the code we need to understand when state changes and what our current state is. We can do this with Fusion API:

Fusion.subscribe('app.currentState', (data) => {
  console.log('Current state was updated to', data.app.currentState);
});

Creating the Animations

We will create two different kind of animations and activate them when the states we’re looking for are active.

CSS Animation

This animation will scale an image when ‘animated’ class is added to the element. We add it to the styles.css document in source code editor.

.scale-image-animation {
  scale: 0.5;
  transition: scale 1s ease-in;
}

.scale-image-animation.animated {
  scale: 1;
}

State Container

This will activate a state container which has an animation selected in Activator, e.g. fade or slide-in.

The state container is created in Activator UI inside the tab (could be created outside but in most cases it will fit best inside the tab). The Activator UI allow you to select duration and delay of the animation. It’s recommended you also change the ID of the state container to something readable, e.g. ‘fadeInPatientImage’ (we will use this id in our example). The exact settings isn’t important for this example, only how we trigger the state container at the right moment.

Running Animations

In script.js in source editor, we’ll have the following code:

const scaleItem = document.querySelector('.scale-image-animation');
// Replace this with querySelectorAll and
// adapt code for using it on multiple elements

Fusion.subscribe('app.currentState', (data) => {
  const { currentState } = data.app;
  if (currentState.length === 2 &&
      currentState.includes('StateContainer-tab1') &&
      currentState.includes('Popup-demo')) {
    // Timeout necessary here for browser rendering (since element is hidden initially)
    setTimeout(() => {
      scaleItem.classList.add('animated'); // add loop if using querySelectorAll
    }, 0);
    Fusion.toggleState('StateContainer-fadeInPatientImage');
  }
});

There is one problem with the code above and that is if you toggle off the state ‘StateContainer-fadeInPatientImage’, then it will toggle back on automatically. With the current API you would have to keep track of states and compare. But in most cases it will not be an issue .