update

ts_web/elements/dees-stepper/dees-stepper.ts

@@ -60,7 +60,6 @@ export class DeesStepper extends DeesElement {
         position: absolute;
         width: 100%;
         height: 100%;
-        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
         overflow: hidden;
       }
 
@@ -86,7 +85,6 @@ export class DeesStepper extends DeesElement {
       .step.selected {
         pointer-events: all;
         filter: opacity(1) saturate(1);
-        transform: translateY(-6px);
         border: 1px solid ${cssManager.bdTheme(colors.dark.blue, colors.dark.blue)};
         box-shadow: ${cssManager.bdTheme('0 28px 60px -30px rgba(15, 23, 42, 0.42)', '0 26px 55px -28px rgba(37, 99, 235, 0.6)')};
         user-select: auto;
@@ -94,6 +92,9 @@ export class DeesStepper extends DeesElement {
 
       .step.hiddenStep {
         filter: opacity(0);
+      }
+
+      .step.entrance.hiddenStep {
         transform: translateY(16px);
       }
 
@@ -179,7 +180,7 @@ export class DeesStepper extends DeesElement {
                 ? 'selected'
                 : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep)
                 ? 'hiddenStep'
-                : ''}"
+                : ''} ${this.getIndexOfStep(stepArg) === 0 ? 'entrance' : ''}"
             >
               ${this.getIndexOfStep(stepArg) > 0
                 ? html`<div class="goBack" @click=${this.goBack}><span style="font-family: Inter"><-</span> go to previous step</div>`
@@ -205,6 +206,9 @@ export class DeesStepper extends DeesElement {
     await this.domtools.convenience.smartdelay.delayFor(0);
     this.selectedStep = this.steps[0];
     this.setScrollStatus();
+    // Remove entrance class after initial animation completes
+    await this.domtools.convenience.smartdelay.delayFor(350);
+    this.shadowRoot.querySelector('.step.entrance')?.classList.remove('entrance');
   }
 
   public async updated() {