How to create Sliding Buttons and there sequences

[manojpandey]

I want to learn how to create the sliding buttons as there in the image also how the sequence steps have been created oppo

[AllanThompson]

These have most likely been done using CSS animations to animate out the panels.  I've used something similar in the past, but really it was just a test to see how it worked.  It's all explained at W3 schools: https://www.w3schools.com/css/css3_animations.asp 

Hope this helps.

[TomasCharvat · Accepted solution]

Hello manojpandey

for sliding panels I am using a CSS:

.panel-hide {
  position: fixed;
  right: -300px;
  top: 0;
  width: 300px;
  height: 100vh
}

.panel-show {
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  height: 100vh
}

Then it is up to you how you assign these styles via JS. You can for example call a function under  Play button (or in "Play Started" event under model) which will check step number for displaying/changing a specific widgets - for example simple way via switch:

$scope.setStepWdgs = function() {
    var step = $scope.view.wdg['model-1']['currentStep'];
    switch(step) {
      case 4:
        // Display panel on start of step #4:
        $scope.view.wdg['panel-1']['class'] = "panel-show";
        break;
      case 5:
        // Hide panel on start of step #5:
        $scope.view.wdg['panel-1']['class'] = "panel-hide";
        break;
      default:
        /*some code for common steps*/
    }
}

Tomas

PS: This code is only example I didn't try it 😅

[HarshSalvi97]

Did you make 2 similar panel widgets for sliding it and giving them different classes? How did you trigger the sliding of panels by js?