This page describes the steps to add custom animation when embedding the lite viewer component in the web application based on the previous article- Customize the Layout of Dashboard.

1. Add the animation css for the dashboard scenario. This code adds a transition effect to the HTML element to animate the dashboard scenario.

   html,
   body {
     margin: 0;
     padding: 0;
     height: 100%;
   }
   
   #demo {
     overflow: hidden;
     height: 100%;
     position: relative;
   }
   
   .center-container {
     width: 1200px;
     height: 400px;
     border: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
   
   .center {
     width: 400px;
     height: 400px;
     margin: 0 auto;
   }
   
   .center-scenario {
     width: 300px;
     position: absolute;
     transform: translateX(0);
     opacity: 1;
     transition: opacity ease 1s, transform ease 1s;
   }
   
   .center-left-scenario-before {
     transform: translateX(-170px);
     opacity: 0;
   }
   
   .center-right-scenario-before {
     transform: translateX(170px);
     opacity: 0;
   }
   
   #scenario-0 {
     right: 110px;
     top: 0;
     height: 120px;
   }
   
   #scenario-1 {
     right: 110px;
     top: 130px;
     height: 140px;
   }
   
   #scenario-2 {
     right: 110px;
     bottom: 0;
     height: 120px;
   }
   
   #scenario-3 {
     left: 120px;
     top: 0;
     height: 160px;
   }
   
   #scenario-4 {
     left: 120px;
     bottom: 0;
     height: 160px;
   }
   
   .left-panel {
     position: absolute;
     left: 0;
     top: 250px;
     bottom: 0;
     width: 300px;
     transition: transform ease 1s;
     transform: translateX(0);
   }
   
   .left-panel.hide {
     transform: translateX(-300px);
   }
   
   .left-scenario {
     height: 200px;
   }
   
   #header {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 50px;
   }
   

2. Initialize the style of HTML element before performing the animation.

    <main id="demo">
     <header id="header"></header>
     <div class="center-container">
       <div class="center" id="center"></div>
   
       <div class="center-scenario center-right-scenario-before" id="scenario-0"></div>
       <div class="center-scenario center-right-scenario-before" id="scenario-1"></div>
       <div class="center-scenario center-right-scenario-before" id="scenario-2"></div>
   
       <div class="center-scenario center-left-scenario-before" id="scenario-3"></div>
       <div class="center-scenario center-left-scenario-before" id="scenario-4"></div>
     </div>
   
     <div class="left-panel hide" id="left-panel">
       <div class="left-scenario" id="scenario-5"></div>
       <div class="left-scenario" id="scenario-6"></div>
       <div class="left-scenario" id="scenario-7"></div>
     </div>
   </main>
   

3. The animation starts after loading the dashboard.

   scenario5.connect(scenarioDom5);
   scenario6.connect(scenarioDom6);
   scenario7.connect(scenarioDom7);
   
   const leftPanel = document.querySelector('#left-panel');
   dash.on('mounted', () => {
   scenarioDom0.classList.remove('center-right-scenario-before');
   scenarioDom1.classList.remove('center-right-scenario-before');
   scenarioDom2.classList.remove('center-right-scenario-before');
   scenarioDom3.classList.remove('center-left-scenario-before');
   scenarioDom4.classList.remove('center-left-scenario-before');
   leftPanel.classList.remove('hide');
   });
   // make dashboard render
   dash.refresh();
   

4. To enhance the animation, add the below util functions into your app.js file. Now, every dashboard scenario will appear for every 0.3 seconds.

   function makeDelay(interval) {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve();
       }, interval);
     });
   }
   
   function makeRunner(n, cb) {
     let count = 0;
   
     return () => {
       count++;
       if (count === n) {
         cb();
       }
     };
   }
   

5. Replace the code added in Step 3 with the following code block.

   scenario5.connect(scenarioDom5);
   scenario6.connect(scenarioDom6);
   scenario7.connect(scenarioDom7);
   
   const leftPanel = document.querySelector('#left-panel');
   
   const done = makeRunner(9, () => {
     dash.resume();
     const DELAY = 300;
     makeDelay(DELAY).then(() => {
       scenarioDom0.classList.remove('center-right-scenario-before');
       return makeDelay(DELAY);
     }).then(() => {
       scenarioDom1.classList.remove('center-right-scenario-before');
       return makeDelay(DELAY);
     }).then(() => {
       scenarioDom2.classList.remove('center-right-scenario-before');
       return makeDelay(DELAY);
     }).then(() => {
       scenarioDom3.classList.remove('center-left-scenario-before');
       return makeDelay(DELAY);
     }).then(() => {
       scenarioDom4.classList.remove('center-left-scenario-before');
       return makeDelay(DELAY);
     }).then(() => {
       leftPanel.classList.remove('hide');
     });
   });
   
   center.on('update', done);
   header.on('update', done);
   scenario0.on('update', done);
   scenario1.on('update', done);
   scenario2.on('update', done);
   scenario3.on('update', done);
   scenario4.on('update', done);
   scenario5.on('update', done);
   scenario6.on('update', done);
   
   dash.suspend();
   // make dashboard render
   dash.refresh();
   

   The Update event is always triggered before the dashboard scenario is rendered. Therefore, we paused the dashboard rendering (so that the dashboard scenario is not rendered, however the update event is still valid) and add the event listeners to each dashboard scenarios.

   Run the animation when all scenarios can be rendered, so you will get a better animation effect.