Helper Classes

scotchPanel.js adds classes to opened panels so you can do animations and other things.

                
                $('#scotch-panel').scotchPanel({
                    direction: 'right',
                    duration: 200,
                    transition: 'ease',
                    clickSelector: '.toggle-panel',
                    distanceX: '220px'
                });
                
                
                
                .scotch-is-showing #scotch-panel ul li {
                    display: none;
                }
                .scotch-is-showing #scotch-panel ul li {
                    display: block;
                   -webkit-animation-duration: 1s;
                    animation-duration: 1s;
                    -webkit-animation-fill-mode: both;
                    animation-fill-mode: both;
                    -webkit-animation-name: rubberBand;
                    animation-name: rubberBand;
                }

                @-webkit-keyframes rubberBand {
                  0% {
                    -webkit-transform: scale3d(1, 1, 1);
                    transform: scale3d(1, 1, 1);
                  }

                  30% {
                    -webkit-transform: scale3d(1.55, 0.75, 1);
                    transform: scale3d(1.55, 0.75, 1);
                  }

                  40% {
                    -webkit-transform: scale3d(0.25, 1.25, 1);
                    transform: scale3d(0.25, 1.25, 1);
                  }

                  50% {
                    -webkit-transform: scale3d(1.15, 0.85, 1);
                    transform: scale3d(1.15, 0.85, 1);
                  }

                  65% {
                    -webkit-transform: scale3d(.95, 1.05, 1);
                    transform: scale3d(.95, 1.05, 1);
                  }

                  75% {
                    -webkit-transform: scale3d(1.05, .95, 1);
                    transform: scale3d(1.05, .95, 1);
                  }

                  100% {
                    -webkit-transform: scale3d(1, 1, 1);
                    transform: scale3d(1, 1, 1);
                  }
                }

                @keyframes rubberBand {
                  0% {
                    -webkit-transform: scale3d(1, 1, 1);
                    -ms-transform: scale3d(1, 1, 1);
                    transform: scale3d(1, 1, 1);
                  }

                  30% {
                    -webkit-transform: scale3d(1.55, 0.75, 1);
                    -ms-transform: scale3d(1.55, 0.75, 1);
                    transform: scale3d(1.55, 0.75, 1);
                  }

                  40% {
                    -webkit-transform: scale3d(0.25, 1.25, 1);
                    -ms-transform: scale3d(0.25, 1.25, 1);
                    transform: scale3d(0.25, 1.25, 1);
                  }

                  50% {
                    -webkit-transform: scale3d(1.15, 0.85, 1);
                    -ms-transform: scale3d(1.15, 0.85, 1);
                    transform: scale3d(1.15, 0.85, 1);
                  }

                  65% {
                    -webkit-transform: scale3d(.95, 1.05, 1);
                    -ms-transform: scale3d(.95, 1.05, 1);
                    transform: scale3d(.95, 1.05, 1);
                  }

                  75% {
                    -webkit-transform: scale3d(1.05, .95, 1);
                    -ms-transform: scale3d(1.05, .95, 1);
                    transform: scale3d(1.05, .95, 1);
                  }

                  100% {
                    -webkit-transform: scale3d(1, 1, 1);
                    -ms-transform: scale3d(1, 1, 1);
                    transform: scale3d(1, 1, 1);
                  }
                }