Дмитрий

Вам нужно делать как-то так:

$('.elem-exp .js-svg-bar').countTo({
    to: 70,
    speed: 1000,
    onUpdate: function (value) {
        $(this).attr('percent', value);
    }
});

Использовать transform, например для выпадающего списка меню по умолчанию следующее значения:

.menu {
      visibility: hidden; 
      will-change: transform, opacity;
      opacity: 0;
      transition: all 0.4s ease-in-out;

      /* сама анимация движения */
     transform: perspective(210px) rotateX(5deg);
}

а при ховере:

opacity: 1;
    visibility: visible; 
    transform: rotateX(0);

И для анимации использовать display: none не правильно по моему, лучше visibility: visible, а после завершения анимации display: none

Советую почитать

https://jsfiddle.net/riot26/vva5sdf4/

Нажмите на Preferences -> Browse packages, попадете в папку Packages. В ней вам надо зайти в папку Theme - Default и найти файлик Default.sublime-theme. В этом файлике вам нужно править объекты у которых поле class соответствует маске sidebar_*

Например так:

...
{
    "class": "sidebar_container",
    // $base02:    #073642         
    "layer0.tint": [7,54,66],
    "layer0.opacity": 1.0,
    "layer0.draw_center": false,
    "layer0.inner_margin": [0, 0, 1, 0],
    "content_margin": [0, 0, 1, 0]
},
{
    "class": "sidebar_tree",
    "row_padding": [8, 3],
    "indent": 12,
    "indent_offset": 17,
    "indent_top_level": false,
    // $base2:     #eee8d5         
    "layer0.tint": [238,232,213],
    "layer0.opacity": 1.0,
    "dark_content": false
},
{
    "class": "sidebar_heading",
    // $base1:     #93a1a1         
    "color": [147,161,161],
    "font.bold": true,
    // $base3:     #fdf6e3         
    "shadow_color": [253,246,227],
    "shadow_offset": [0, 1]
},
{
    "class": "sidebar_heading",
    "parents":
    [
        { "class": "tree_row", "attributes": ["selected"] }
    ],

    "shadow_color": [160, 174, 192]
},
{
    "class": "sidebar_label",
    // $base01:    #586e75         
    "color": [88,110,117],
    "font.bold": false
    // , "shadow_color": [250, 250, 250], "shadow_offset": [0, 0]
},
{
    "class": "sidebar_label",
    "parents": [{"class": "tree_row", "attributes": ["selected"]}],
    // $base01:    #586e75         
    "color": [88,110,117]
    // , "shadow_color": [60, 60, 60], "shadow_offset": [0, 1]
},

{
    "class": "sidebar_label",
    "parents": [{"class": "tree_row", "attributes": ["expandable"]}],
    "settings": ["bold_folder_labels"],
    "font.bold": true
}
...

Только этот код не добявляйте, это код для светлого сайдбара xD

Гляньте этот или этот

Ах да, вы же хотите еще чтоб он вам тип файлика показывал)

Вот тут лежит приличный список тем для саблайма, например с 15 по 20 темы имеют обозначения типов файлов, но они какие-то очень уж дефолтные. Я не нашел инфы о готовом решении по кастомизации иконок, но, думаю, вам не составит особых трудов добраться до папки с иконками и до конфига, который связывает иконки и типы файлов)

Вот тут целая куча иконок для саблайма, и все они там очень похожи на те, что вы заскринили. Я даже думаю, что это именно те. Инструкция по установке там же.

Вся моя писанина, кажется, не имела смысла - парень ниже дал ссылку на тему, которая по дефолту юзает иконки из вашего скрина)

Кажется по дефолту только третий саблайм умеет юзать иконки, так что если у вас на втором саблайме их нет, то просто поставьте Sublime Text 3 и накатите на него эту тему . После установки темы может показаться что вам подсунули фальшивку и это гавно (которое вы поставили) следует срочно удалить. Я не знаю, зачем разработчик темы сделал это, но с самого начала она выглядит... немного странно. Инструкция как сделать из этой темы то, что вы видите на скринах, лежит там же, на гите.