Transitions in search UI showcases: tabs transition, buttons material animations, page transitions

HTML

              
                .aside(data-aside)
  .aside_user-header
    a.aside_user-avatar(data-animated-item)
      img.user-avatar(src="http://www.iswomenhair.info/wp-content/uploads/2015/03/shoulder-length-curly-hairstyles-for-long-face-women-with-thick-coarse-hair.jpg")
    a.aside_user-name(data-animated-item) phonphanperry777@gmail.com
  .aside_menu-main
    a.aside_item(data-animated-item)
      .aside_item-icon
        svg(viewBox="0 0 24 24",height="100%",width="100%",preserveAspectRatio="xMidYMid meet")
          g
            path(d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z")
      .aside_item-text Search
    a.aside_item(data-animated-item)
      .aside_item-icon
        svg(height="100%",viewBox="0 0 24 24",width="100%")
          path(d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z")
          path(d="M0 0h24v24H0z",fill="none")
      .aside_item-text Messenger
      .aside_item-counter
        .counter 7
    a.aside_item(data-animated-item)
      .aside_item-icon
        svg(viewBox="0 0 24 24",height="100%",width="100%",preserveAspectRatio="xMidYMid meet")
          g
            path(d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z")
      .aside_item-text Chatrooms
    a.aside_item(data-animated-item)
      .aside_item-icon
        svg(viewBox="0 0 24 24",height="100%",width="100%",preserveAspectRatio="xMidYMid meet")
          g
            path(d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z")
      .aside_item-text Like Gallery
    a.aside_item(data-animated-item)
      .aside_item-icon
        svg(viewBox="0 0 24 24",height="100%",width="100%",preserveAspectRatio="xMidYMid meet")
          g
            path(d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z")
      .aside_item-text Livecam
  .aside_menu-advanced
    a.aside_item(data-animated-item)
      .aside_item-icon
        svg(viewBox="0 0 24 24",height="100%",width="100%",preserveAspectRatio="xMidYMid meet")
          g
            path(d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z")
      .aside_item-text Friends
    a.aside_item(data-animated-item)
      .aside_item-icon
        svg(viewBox="0 0 24 24",height="100%",width="100%",preserveAspectRatio="xMidYMid meet")
          g
            path(d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z")
      .aside_item-text Activity
    a.aside_item(data-animated-item)
      .aside_item-icon
        svg(viewBox="0 0 24 24",height="100%",width="100%",preserveAspectRatio="xMidYMid meet")
          g
            path(d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z")
      .aside_item-text Forum
  .aside_menu-item
    .naughty-mode-picker
      .naughty-mode-picker_link
        .naughty-mode-picker_caption Naughty Mode
        .naughty-mode-picker_value No limits
      .naughty-mode-picker_menu
        .naughty-mode-picker_list
        .naughty-mode-picker_description

.notification-feed(data-notification-feed)
  - for (var x = 0; x < 3; x++)
    a.notification-popup(data-notification-popup="#{x}",data-animated-item)
      .notification-popup_photo
        .user-avatar
          img.user-avatar_img(src="http://www.ubuntufree.com/wp-content/uploads/2014/07/Pretty-Girl-Wallpaper-200x200.jpg")
      .notification-popup_info
        h1.notification-popup_title She winked at you
        .notification-popup_text Samantha, 25 years old, winked at you just now
      //.notification-popup_activity-buttons
        .activity-buttons
          .activity-buttons_item
            .btn.btn__flat.btn__big(href="#",data-animated-item)
              .btn_icon
                svg(height="100%",viewBox="0 0 24 24",width="100%")
                  path(d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z")
                  path(d="M0 0h24v24H0z",fill="none")
              .btn_text Chat
          .activity-buttons_item
            .btn.btn__flat(href="#",data-animated-item)
              .btn_icon
                svg(height="100%",viewBox="0 0 24 24",width="100%")
                  path(d="M0 0h24v24H0z",fill="none")
                  path(d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z")
              .btn_text Add to friends

.body(data-body)
  .overlay(data-overlay)
  .toolbar
    .toolbar_header
      .header
        .header_navigation
          .nav
            a.nav_menu(data-aside-trigger)
        a.header_logo(href="#")
          
        .header_options
          .header_option.header_option-item__update
            .upgrade-btn
              a.btn.btn__upgrade(href="#",data-animated-item)
                .btn_text Get extra!
          a.header_option-item.header_option-item__icon(href="#",data-animated-item)
            .header_counter
              .counter(data-counter-notifications)
            .header_icon
              svg.icon-notification(x="100%",y="100%",viewBox="0 0 302.346 302.346",style="enable-background:new 0 0 302.346 302.346;",data-notification-icon)
                path(d="M265.69,186.248c-3.261-2.856-6.341-5.554-7.927-8.405c-0.103-0.189-0.215-0.38-0.365-0.626   c-5.713-9.142-7.807-31.427-9.059-44.742c-0.185-1.975-0.363-3.865-0.54-5.624c-0.016-0.165-0.036-0.329-0.067-0.57   c-2.814-19.679-9.793-48.044-27.066-71.425c-12.097-16.373-27.165-27.333-44.83-32.621C174.551,9.761,163.981,0,151.173,0   c-12.808,0-23.379,9.763-24.663,22.238c-17.666,5.284-32.732,16.244-44.83,32.621c-17.272,23.377-24.252,51.743-27.076,71.494   c-0.021,0.169-0.042,0.333-0.056,0.483c-0.179,1.778-0.356,3.664-0.542,5.638c-1.252,13.317-3.347,35.607-9.094,44.8   c-0.096,0.158-0.188,0.317-0.308,0.528c-1.604,2.886-4.685,5.587-7.946,8.446c-8.048,7.055-23.029,20.186-10.282,43.857   c2.313,4.297,6.782,6.967,11.663,6.967h226.268c4.875,0,9.343-2.667,11.663-6.966C288.715,206.438,273.739,193.305,265.69,186.248z   ")
                path.icon-notification_tongue(d="M176.874,264.796h-52.341c-1.703,0-3.304,0.744-4.392,2.041c-2.127,2.535-1.507,6.056-1.097,8.386l0.035,0.201   c2.722,15.6,16.207,26.922,32.064,26.922c16.152,0,30.011-12.047,32.237-28.022c0.014-0.098,0.037-0.208,0.06-0.327   c0.268-1.417,0.826-4.368-1.23-6.849C181.482,266.27,179.821,264.796,176.874,264.796z")
    
  .page(data-page="profile")
    .menu.menu__profile
      .menu_inner
        a.back-link back to search
    .content.content__profile
      .profile
        .profile_card(data-profile-card)
          .profile_aside
            .profile_avatar
              .user-avatar(data-animated-item)
                img.user-avatar_img(src="http://www.citytv.com/wp-content/uploads/2012/12/1ng_05_zooey_deschanel_1268_rjw-e1389983668262-300x300.jpg")
            .profile_activity-buttons
              .activity-buttons.activity-buttons__column
                .activity-buttons_item
                  .btn.btn__flat(href="#",data-animated-item)
                    .btn_icon
                      svg(height="100%",viewBox="0 0 24 24",width="100%")
                        path(d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z")
                        path(d="M0 0h24v24H0z",fill="none")
                    .btn_text Chat
                .activity-buttons_item
                  .btn.btn__flat(href="#",data-animated-item)
                    .btn_icon
                      svg(height="100%",viewBox="0 0 24 24",width="100%")
                        path(d="M0 0h24v24H0z",fill="none")
                        path(d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z")
                    .btn_text Send mail
                .activity-buttons_item(data-tooltip-trigger)
                  .btn.btn__flat(href="#",data-animated-item)
                    .btn_icon
                      svg(height="100%",viewBox="0 0 24 24",width="100%")
                        path(d="M0 0h24v24H0z",fill="none")
                        path(d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z")
                    .btn_text Add to friends
                  .tooltip.tooltip__left(data-tooltip)
                    .tooltip_background
                    .tooltip_text Add this user to friends
          .profile_info
            .profile_about
              .profile_screenname Alice
              .profile_about-item Female, 22 years old
              .profile_about-item Georgia, Macon
              .profile_about-item 912 miles from you
            .profile_about
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis doloribus odio, excepturi blanditiis recusandae, pariatur sint, facilis, laudantium ullam alias maxime! Eos quam culpa minima cupiditate molestias consectetur, assumenda cum.
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis doloribus odio, excepturi blanditiis recusandae, pariatur sint, facilis, laudantium ullam alias maxime! Eos quam culpa minima cupiditate molestias consectetur, assumenda cum.
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis doloribus odio, excepturi blanditiis recusandae, pariatur sint, facilis, laudantium ullam alias maxime! Eos quam culpa minima cupiditate molestias consectetur, assumenda cum.
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis doloribus odio, excepturi blanditiis recusandae, pariatur sint, facilis, laudantium ullam alias maxime! Eos quam culpa minima cupiditate molestias consectetur, assumenda cum.
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis doloribus odio, excepturi blanditiis recusandae, pariatur sint, facilis, laudantium ullam alias maxime! Eos quam culpa minima cupiditate molestias consectetur, assumenda cum.
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis doloribus odio, excepturi blanditiis recusandae, pariatur sint, facilis, laudantium ullam alias maxime! Eos quam culpa minima cupiditate molestias consectetur, assumenda cum.
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis doloribus odio, excepturi blanditiis recusandae, pariatur sint, facilis, laudantium ullam alias maxime! Eos quam culpa minima cupiditate molestias consectetur, assumenda cum.
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis doloribus odio, excepturi blanditiis recusandae, pariatur sint, facilis, laudantium ullam alias maxime! Eos quam culpa minima cupiditate molestias consectetur, assumenda cum.
  .page.page__search.is-active(data-page="search")
    .content_overlay(data-content-overlay)
    .content_user-placeholder(data-user-placeholder)
    .menu.menu__search
      .menu_inner
        .menu_tabs(data-tabs)
          a.menu_tab-link.is-active(data-tabs-item="0") All members
          a.menu_tab-link(data-tabs-item="1") Online now
          a.menu_tab-link(data-tabs-item="2") New members
          .menu_tab-active-indicator(data-active-indicator)
    .search-parametrs(data-search-parametrs)
      .search-parametrs_inner
        .search-parametrs_item.search-parametrs_item__caption
          .search-parametrs_caption Find me
        .search-parametrs_sep
        .search-parametrs_item
          .search-parametrs_select Female
        .search-parametrs_sep
        .search-parametrs_item.search-parametrs_item__caption
          .search-parametrs_caption Age
        .search-parametrs_sep
        .search-parametrs_item
          .search-parametrs_select 18
        .search-parametrs_sep
        .search-parametrs_item
          .search-parametrs_caption -
        .search-parametrs_sep
        .search-parametrs_item
          .search-parametrs_select 26
        .search-parametrs_sep
        .search-parametrs_item.search-parametrs_item__caption
          .search-parametrs_caption Location
        .search-parametrs_sep
        .search-parametrs_item.search-parametrs_item__location
          .search-parametrs_select Houston, USA
        .search-parametrs_sep
        .search-parametrs_item
          .search-parametrs_select +50 km
        .search-parametrs_sep
        .search-parametrs_item
          .search-parametrs_select More
            .counter 2
        .search-parametrs_sep
        .search-parametrs_item.search-parametrs_item__find
          a.btn.btn__default(href="#",data-animated-item)
            .btn_text Find
    .content.content(data-tab-content)
      .content_tab(data-tab-content-item="0")
        .search
          - for (var x = 0; x < 12; x++)
            .search_item
              .user-item(data-user-item)
                .user-item_avatar(data-user-link)
                  .user-avatar
                    img.user-avatar_img(src="http://www.citytv.com/wp-content/uploads/2012/12/1ng_05_zooey_deschanel_1268_rjw-e1389983668262-300x300.jpg")
                .user-item_info
                  a.user-item_screenname(href="#") Alice
                  .user-item_about Female, 22 years old
                  .user-item_about Georgia, Macon
                  .user-item_about 912 miles from you
                .user-item_activity-buttons
                  .activity-buttons
                    .activity-buttons_item
                      .btn.btn__flat.btn__big(href="#",data-animated-item)
                        .btn_icon
                          svg(height="100%",viewBox="0 0 24 24",width="100%")
                            path(d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z")
                            path(d="M0 0h24v24H0z",fill="none")
                        .btn_text Chat
                    .activity-buttons_item.activity-buttons_item__no-text
                      .btn.btn__flat.btn__round.btn__no-text(href="#",data-animated-item)
                        .btn_icon
                          svg(height="100%",viewBox="0 0 24 24",width="100%")
                            path(d="M0 0h24v24H0z",fill="none")
                            path(d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z")
                    .activity-buttons_item.activity-buttons_item__no-text(data-tooltip-trigger)
                      .btn.btn__flat.btn__round.btn__no-text(href="#",data-animated-item)
                        .btn_icon
                          svg(height="100%",viewBox="0 0 24 24",width="100%")
                            path(d="M0 0h24v24H0z",fill="none")
                            path(d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z")
                      .tooltip.tooltip__left(data-tooltip)
                        .tooltip_background
                        .tooltip_text Add this user to friends
      .content_tab(data-tab-content-item="1")
        .search
          - for (var x = 0; x < 12; x++)
            .search_item
              .user-item
                .user-item_avatar
                  .user-avatar
                    img.user-avatar_img(src="http://images.8tracks.com/cover/i/002/730/997/tumblr_n81rwgjICv1tw0q1zo1_500-5259.jpg?rect=0,0,500,500&q=98&fm=jpg&fit=max&w=320&h=320")
                .user-item_info
                  a.user-item_screenname(href="#") Anastasija
                  .user-item_about Female, 19 years old
                  .user-item_about Riga, Latvia
                  .user-item_about 4365 miles from you
                .user-item_activity-buttons
                  .activity-buttons
                    .activity-buttons_item
                      .btn.btn__flat.btn__big(href="#",data-animated-item)
                        .btn_icon
                          svg(height="100%",viewBox="0 0 24 24",width="100%")
                            path(d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z")
                            path(d="M0 0h24v24H0z",fill="none")
                        .btn_text Chat
                    .activity-buttons_item.activity-buttons_item__no-text
                      .btn.btn__flat.btn__round.btn__no-text(href="#",data-animated-item)
                        .btn_icon
                          svg(height="100%",viewBox="0 0 24 24",width="100%")
                            path(d="M0 0h24v24H0z",fill="none")
                            path(d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z")
                    .activity-buttons_item.activity-buttons_item__no-text
                      .btn.btn__flat.btn__round.btn__no-text(href="#",data-animated-item)
                        .btn_icon
                          svg(height="100%",viewBox="0 0 24 24",width="100%")
                            path(d="M0 0h24v24H0z",fill="none")
                            path(d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z")
      .content_tab(data-tab-content-item="2")
        .search
          - for (var x = 0; x < 12; x++)
            .search_item
              .user-item
                .user-item_avatar
                  .user-avatar
                    img.user-avatar_img(src="https://3.bp.blogspot.com/-NsYHo-xRrQ0/VlX7-o-iZ5I/AAAAAAAAAEY/BZGG-mtcXy8/s320/Rusian%2BGirls%2BSelfie.jpg")
                .user-item_info
                  a.user-item_screenname(href="#") Wild Cast
                  .user-item_about Female, 31 years old
                  .user-item_about Ukraine, Kyiv
                  .user-item_about 21 miles from you
                .user-item_activity-buttons
                  .activity-buttons
                    .activity-buttons_item
                      .btn.btn__flat.btn__big(href="#",data-animated-item)
                        .btn_icon
                          svg(height="100%",viewBox="0 0 24 24",width="100%")
                            path(d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z")
                            path(d="M0 0h24v24H0z",fill="none")
                        .btn_text Chat
                    .activity-buttons_item.activity-buttons_item__no-text
                      .btn.btn__flat.btn__round.btn__no-text(href="#",data-animated-item)
                        .btn_icon
                          svg(height="100%",viewBox="0 0 24 24",width="100%")
                            path(d="M0 0h24v24H0z",fill="none")
                            path(d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z")
                    .activity-buttons_item.activity-buttons_item__no-text
                      .btn.btn__flat.btn__round.btn__no-text(href="#",data-animated-item)
                        .btn_icon
                          svg(height="100%",viewBox="0 0 24 24",width="100%")
                            path(d="M0 0h24v24H0z",fill="none")
                            path(d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z")
                          
audio(id="notificationSound",src="https://cdn.wdrimg.com/assets/ca866e62/tada.mp3")

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);

@easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
@easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
@easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
@easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
@easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
@easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
@easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
@materialEase: cubic-bezier(0.39, 0, 0.17, 0.99);
@menu_transition: { transition: all .75s @easeOutExpo; };

@media-840: ~"(min-width: 840px)";
@media-1280: ~"(min-width: 1280px)";

// material shadows
@card-1: { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); };
@card-2: { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); };
@card-3: { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); };
@card-4: { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); };
@card-5: { box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); };

@keyframes counterShow {
  0% {
    transform: scale(0);
  }
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
::-webkit-scrollbar,
::-webkit-scrollbar-button {
  background: #eee;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #ccc;
}

body {
  overflow: hidden;
  background: #eee;
  font: 14px/1.2 Open Sans, 'Open Sans', Arial, sans-serif;
}

.body {
  overflow: auto;
  height: 100vh;
  @media @media-840 {
    overflow: hidden;
    height: auto;
  }
}

.page {
  display: none;
  @media @media-840 {
    margin-top: 60px;
  }
  &.is-active {
    display: block;
  }
}

.overlay {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .25s @easeOutExpo;
  &.is-active {
    transition-duration: .5s;
    opacity: .5;
    visibility: visible;
  }
}

.toolbar {
  min-width: 840px;
  width: 100%;
  text-align: center;
  @media @media-840 {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 98;
  }
  &_header {
    position: relative;
    z-index: 10;
    background: #f5a72a;
  }
}

.menu {
  position: relative;
  z-index: 10;
  background: #f5a72a;
  height: 40px;
  min-width: 840px;
  &_inner {
    margin: 0 auto;
    width: 820px;
    @media @media-1280 {
      width: 1260px;
    } 
  }
  &__search {
    text-align: center;
  }
  &_tabs {
    position: relative;
    display: inline-flex;
    justify-content: center;
    color: rgba(255,255,255,.5);
    background-image:  -webkit-linear-gradient(white 0%, white 100%);
    background-repeat: no-repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    @menu_transition();
  }
  &_tab-active-indicator {
    height: 3px;
    position: absolute;
    bottom: 0;
    background: #de5226;
    @menu_transition();
  }
  &_tab-link {
    cursor: pointer;
    text-transform: uppercase;
    padding: 12px 20px;
    height: 40px;
    box-sizing: border-box;
    font-weight: bold;
    @menu_transition();
    background-image: -webkit-linear-gradient(rgba(255,255,255,.5) 0%, rgba(255,255,255,.5) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    &.is-active {
      color: white;
    }
  } 
}

.header {
  display: flex;
  height: 60px;
  justify-content: space-between;
  align-items: center;
  margin: 0 5px;
  position: relative;
  &_logo {
    left: 0;
    right: 0;
    top: 0;
    position: absolute;
    width: 90px;
    margin: 10px auto;
  }
  &_options {
    display: flex;
    align-items: center;
  }
  &_option-item {
    overflow: hidden;
    position: relative;
    margin: 0 10px;
    color: white;
    &__icon {
      will-change: transform;
      border-radius: 100px;
    }
    &__update {
      margin: 0 20px;
    }
  }
  &_icon {
    border-radius: 100px;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    padding: 12px;
    svg {
      fill: currentColor;
    }
  }
  &_counter {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    margin: 5px;
  }
  &_upgrade-btn {
    margin: 0 10px;    
  }
}

.logo {
  width: 100%;
}

.nav {
  &_menu {
    cursor: pointer;
    display: block;
    width: 40px;
    height: 40px;
    background: white;
  }
}

.aside {
  overflow: auto;
  transform: translate(-100%);
  top: 0;
  position: fixed;
  z-index: 100;
  background: #f9f9f9;
  //box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
  @card-3();
  width: 400px;
  height: 100%;
  transition: all .25s @easeOutExpo;
  visibility: hidden;
  &.is-active {
    transition-duration: .5s;
    transform: translate(0);
    visibility: visible;
  }
  &_user-header {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    width: 100%;
    height: 220px;
    background: center url(http://hdwplan.com/wp-content/uploads/2015/12/3d-abstract-wallpaper.jpeg);
    background-size: cover;
  }
  &_user-avatar {
    will-change: transform;
    overflow: hidden;
    position: relative;
    display: block;
    cursor: pointer;
    width: 100px;
    height: 100px;
    margin: 20px;
    border-radius: 100px;
  }
  &_user-name {
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 0 20px;
    height: 60px;
    color: white;
    font-weight: bold;
  }
  &_menu-main {
    background: white;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.20);
  }
  &_menu-advanced {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.20);
  }
  &_menu-item {
    font-weight: bold;
    color: #4c4c4c;
    border-bottom: 1px solid rgba(0,0,0,0.20);
  }
  &_item-icon {
    width: 31px;
    height: 31px;
    margin: 0 20px;
    svg {
      fill: currentColor;
    }
  }
  &_item-text {
    margin-left: 0px;
  }
  &_item-counter {
    margin: 0 10px;
  }
  &_item {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #4c4c4c;
    height: 60px;
    position: relative;
    overflow: hidden;
    transition: all .05s linear;
    &:hover {
      background: rgba(0,0,0,.05);
    }
  }
}

.counter {
  border-radius: 100px;
  background: #de5226;
  color: white;
  display: inline-block;
  min-width: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 11px;
  animation: counterShow .5s @easeOutBack;
  &:empty {
    display: none;
  }
}

.search-parametrs {
  height: 60px;
  background: white;
  box-sizing: border-box;
  z-index: 50;
  position: relative;
  min-width: 840px;
  @menu_transition();
  @card-2();
  &_inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 1240px;
    padding: 10px 0;
    margin: auto;
  }
  &_item {
    flex: .5 1 auto;
    margin: 0 10px;
    white-space: nowrap;
    &__location,
    &__find {
      flex: 1 1 auto;
    }
  }
  &_item__caption,
  &_item__caption + &_sep{
    display: none;
  }
  &_sep {
    flex-shrink: 0;
    width: 1px;
    height: 30px;
    background: rgba(0,0,0,.2);
    margin: 5px 10px;
  }
  &_caption {
    color: #6e6e6e;
  }
  &_select {
    text-align: left;
    cursor: pointer;
    position: relative;
    font-weight: 600;
    padding-right: 15px;
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      margin: -2px 0;
      border-width: 5px 5px 0;
      border-style: solid;
      border-color: rgba(0,0,0,.5) transparent;
    }
  }
  @media @media-1280 {
    &_item__caption,
    &_item__caption + &_sep {
      display: block;
    }
  }
}

.btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 3px;
  color: white;
  text-transform: uppercase;
  padding: 12px;
  font-weight: bold;
  text-decoration: none;
  transition: background .1s;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  will-change: transform;
  &__big {
    padding: 12px 22px;
  }
  &__round {
    border-radius: 100px;
    height: 50px;
    width: 50px;
  }
  &__upgrade {
    background: #de5226;
    color: white;
    //box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.30);
    @card-1();
    &:hover {
      background: darken(saturate(#de5226, 20%), 5%);
    }
  }
  &__default {
    background: #eee;
    color: #4c4c4c;
    //box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.30);
    @card-1();
    &:hover {
      background: darken(#eee, 2.5%);
    }
  }
  &__no-text &_icon {
    margin-right: 0;
  }
  &__flat {
    color: #4c4c4c;
  }
  &_icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
    margin-right: 10px;
  }
}

.activity-buttons {
  &__column {
    flex-direction: column;
    box-sizing: border-box;
    padding: 20px;
  }
  &,
  &_item {
    display: flex;
    align-items: stretch;
    width: 100%;
  }
  &_item {
    position: relative;
    &__no-text {
      flex: 0;
      align-self: center;
      &:last-child {
        margin-right: 10px;
      }
    }
  }
}

.content {
  display: flex;
  align-items: stretch;
  min-width: 820px;
  @media @media-840 {
    overflow: auto;
    height: ~"calc(100vh - 100px)";
  }
  &__profile {
    flex-direction: column;
  }
  &_overlay {
    position: fixed;
    z-index: 51;
    background: white;
    @menu_transition();
    // width: calc(100vw / 2 + 100vh / 2);
    // height: calc(100vw / 2 + 100vh / 2);
    transform: scale(0);
    border-radius: 2000px;
    &.is-animated {
      animation: content_overlay_show .75s @materialEase forwards;
    }
    @keyframes content_overlay_show {
      100% {
        transform: scale(1);
        background: #eee;
      }
    }
  }
  &_tab {
    display: none;
    width: 820px;
    margin: auto;
    @media @media-1280 {
      width: 1260px;
    }
    &.is-active {
      display: block;
    }
  }
  &_user-placeholder {
    transform: translate(-50%, -50%);
    position: fixed;
    border-radius: 3px;
    background: white;
    z-index: 700;
    display: none;
    @card-1();
    &.is-active {
      display: block;
    }
    &.is-animated {
      transition: margin-top .5s @materialEase .05s,
        margin-left .4s @materialEase,
        top .5s @materialEase .05s,
        left .4s @materialEase,
        width .4s @materialEase,
        height .5s @materialEase .05s;
    }
  }
}

.search {
  width: 100%;
  box-sizing: border-box;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  @media @media-1280 {
    padding: 40px 20px;
  }
  &_item {
    display: flex;
    width: 380px;
    margin-bottom: 20px;
    @media @media-1280 {
      margin-bottom: 40px;
    }
  }
}

.user-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background: white;
  border-radius: 3px;
  @card-1();
  &.is-animated {
    z-index: 300;
    & > * {
      transition: all .5s;
      opacity: 0;
      visibility: hidden;
    }
  }
  &_avatar {
    border-radius: 3px 0 0;
    width: 160px;
  }
  &_activity-buttons {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 60px;
    background: #f9f9f9;
    border-top: 1px solid rgba(204,204,204,0.50);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    box-sizing: border-box;
  }
  &_info {
    padding: 20px 20px 10px;
    display: flex;
    flex-direction: column;
  }
  &_screenname {
    color: #de5226;
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 4px;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
  &_about {
    color: #6e6e6e;
    margin: 8px 0 0;
  }
}

.user-avatar {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  &,
  &_img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
  }
}

.naughty-mode-picker {
  &_link {
    display: flex;
    cursor: pointer;
    padding: 20px 10px 20px 20px;
  }
  &_value {
    border-left: 1px solid rgba(0,0,0,0.20);
    padding-left: 20px;
    margin-left: 20px;
  }
}

.ink {
	display: block; position: absolute;
	background: rgba(0,0,0,.1);
	border-radius: 100%;
	transform: scale(0);
  z-index: 999;
}
.ink.animate {
  animation: ripple .75s linear;
}
@keyframes ripple {
	75% {
    transform: scale(2.5);
  }
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

.tooltip {
  top: 100%;
  left: 50%;
  transform: translate(-50%, -10px);
  position: absolute;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1),
    opacity 350ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 3px;
  will-change: transform;
  z-index: 200;
  white-space: nowrap;
  &.is-active {
    opacity: 1;
    transform: translate(-50%, 5px);
    visibility: visible;
  }
  &_background {
    width: 0;
    height: 0;
    position: absolute;
    background: rgba(0,0,0,.5);
    border-radius: 50%;
    left: 50%;
    top: 0;
    transform: translate(-50%, -80%);
    transition: width 550ms cubic-bezier(0.23, 1, 0.32, 1),
      height 550ms cubic-bezier(0.23, 1, 0.32, 1),
      background 450ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  &_text {
    position: relative;
    padding: 10px 15px;
    font: 600 12px/20px "Open Sans",Arial,sans-serif;
    color: #fff;
  }
  &__left {
    left: auto;
    right: 0;
    transform: translate(0, -15px);
    &.is-active {
      transform: translate(0, 0);
    }
  }
  &__left &_background {
    left: 100%;
    transform: translate(-50%, -50%);
  }
  &__right {
    left: 0;
    right: auto;
    transform: translate(0, -15px);
    &.is-active {
      transform: translate(0, 0);
    }
  }
  &__right &_background {
    left: 0;
    transform: translate(-50%, -50%);
  }
}

@keyframes bell {
  20% {
    transform: rotate(30deg);
  }
  40% {
    transform: rotate(-18deg);
  }
  60% {
    transform: rotate(11deg);
  }
  80% {
    transform: rotate(-6deg);
  }
}
@keyframes bellTongue {
  20% {
    transform: translate(-60px);
  }
  40% {
    transform: translate(32px);
  }
  60% {
    transform: translate(-22px);
  }
  80% {
    transform: translate(12px);
  }
}

.icon-notification {
  transform-origin: 50% 0;
  &.is-animate {
    animation: bell 1.6s @easeInOutCubic;
  }
  &.is-animate &_tongue {
    animation: bellTongue 1.6s @easeInOutCubic .15s;
  }
}

.notification-feed {
  transition: all .3s @easeOutExpo;
  position: fixed;
  display: flex;
  flex-direction: column;
  z-index: 800;
  top: 100%;
  right: 0;
  margin: -20px 30px;
}

@keyframes notification-popup-disappear {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.notification-popup {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin: 10px 0;
  width: 380px;
  background: white;
  @card-3();
  border-radius: 3px;
  flex-wrap: wrap;
  transition: all .3s @easeOutExpo;
  display: none;
  animation: notification-popup-disappear .5s @easeInQuint 20s forwards;
  &:hover {
    @card-4();
  }
  &.is-active {
    display: flex;
  }
  &_photo {
    border-radius: 3px 0 0 3px;
    width: 30%;
  }
  &_info {
    flex: 1;
    padding: 20px 20px 10px;
    display: flex;
    flex-direction: column;
  }
  &_title {
    color: #de5226;
    margin: 0;
    font-size: 18px;
    margin: 0 0 5px;
  }
  &_text {
    line-height: 1.4;
  }
  &_activity-buttons {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 50px;
    border-top: 1px solid rgba(204,204,204,0.50);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    box-sizing: border-box;    
  }
}

.profile {
  width: 820px;
  margin: 0 auto;
  padding: 20px;
  @media @media-1280 {
    width: 1260px;
    padding: 40px 20px;
  }
  &_card {
    background: white;
    @card-1();
    display: flex;
  }
  &_avatar {
    width: 300px;
    flex: 1 0 auto;
    border-radius: 3px 0 0;
  }
  &_info {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  &_aside {
    background: #f9f9f9;
  }
  &_screenname {
    font-size: 24px;
    font-weight: bold;
  }
  &_about {
    padding: 40px 40px 20px;
    border-bottom: 1px solid #f9f9f9;
  }
  &_about-item {
    color: #6e6e6e;
    display: inline-block;
    &::after {
      content: "; ";
    }
  }
}

.back-link {
  color: white;
  text-transform: uppercase;
}

JS

              
                // params
var NOTIFICATIONS = true; // true || false
// ------

var $notificationSound = document.getElementById("notificationSound");

function TabsChangeActive (el) {
    var $tabActive = el;

    if ($tabActive.length) {
      
      var $tabs = $tabActive.closest("[data-tabs]"),
          $activeIndicator = $tabs.find("[data-active-indicator]"),
          currentTab = $tabActive.data("tabs-item");
      
      $("[data-tab-content-item]").removeClass("is-active");            
      $('[data-tab-content-item="' + currentTab + '"]')
        .addClass("is-active");

      $tabs.find("[data-tabs-item]").removeClass("is-active");
      $tabActive.addClass("is-active");

      $tabs.css({
        backgroundPosition: $tabActive.position().left + "px 0",
        backgroundSize: $tabActive.outerWidth() + "px 100%"
      });
  
      $activeIndicator.width($tabActive.outerWidth());
      $activeIndicator.css('left', $tabActive.position().left);
      
      $("[data-tab-content]").animate({ scrollTop: 0 }, 250);
      
    }
}

function newNotification() {
  if ($("[data-counter-notifications]").text() >= 2) clearInterval(notifInterval);
  var $iconNotification = $("[data-notification-icon]");
  var nextValue = ($("[data-counter-notifications]").text() >= 3) ? "•" : ( +$("[data-counter-notifications]").text() + 1 ) || "•";
  
  $iconNotification.addClass("is-animate");
  $("[data-notification-popup=" + (nextValue-1) + "]").addClass("is-active");
  if (nextValue <= 3) {
    var h = $(".notification-popup").outerHeight() + 20;
    $("[data-notification-feed]").css({marginTop: "-="+h+"px"});
    $notificationSound.play();
  }
  $iconNotification.one("animationend webkitAnimationEnd oanimationend MSAnimationEnd", function(e){
    $("[data-counter-notifications]").text( nextValue );
    $(e.currentTarget).removeClass("is-animate");
  });
}

var notifInterval;
$(document).ready(function(){
  TabsChangeActive($("[data-tabs-item].is-active"));
  if (NOTIFICATIONS == true) {
    notifInterval = setInterval(newNotification, 5000);
  }
});

$(function(){
  
  $("[data-tabs-item]").click(function(){
    TabsChangeActive($(this));
  });
  
  $("[data-aside-trigger], [data-overlay]").click(function(){
    $("[data-aside]").toggleClass("is-active");
    $("[data-overlay]").toggleClass("is-active");
  });
  
});

$(function(){
	var ink, d, x, y;
	$("[data-animated-item]").click(function(e){
    if($(this).find(".ink").length === 0){
        $(this).prepend("<span class='ink'></span>");
    }

    ink = $(this).find(".ink");
    ink.removeClass("animate");
     
    if(!ink.height() && !ink.width()){
        d = Math.max($(this).outerWidth(), $(this).outerHeight());
        ink.css({height: d, width: d});
    }
     
    x = e.pageX - $(this).offset().left - ink.width()/2;
    y = e.pageY - $(this).offset().top - ink.height()/2;
     
    ink.css({top: y+'px', left: x+'px'}).addClass("animate");
    
    ink.one("animationend webkitAnimationEnd oanimationend MSAnimationEnd", function(e){
      $(e.currentTarget).remove();
    });
    
  });
});

$(function(){
  $("[data-tooltip-trigger]").mouseover(function() {
    var _this = $(this),
        _tooltip = $(this).find("[data-tooltip]");
    _tooltip
      .addClass("is-active")
      .find(".tooltip_background").css({
        width: _tooltip.width() * 2.5,
        height: _tooltip.width() * 2.5
    });
  }).mouseout(function() {
    var _this = $(this),
        _tooltip = $(this).find(".tooltip");
    _tooltip
      .removeClass("is-active")
      .find(".tooltip_background").css({
        width: 0,
        height: 0
    });
  });
});

$(function(){
  $("[data-user-link]").click(function(){
    
    var $currentUserItem = $(this).closest("[data-user-item]");
    var userItemWidth = $currentUserItem.width();
    var userItemHeight = $currentUserItem.height();
    
    var pageWidth = $('[data-page="search"]').width();
    var pageHeight = $('[data-page="search"]').height();
    
    var $userPlaceholder = $("[data-user-placeholder]");
    var $contentOverlay = $("[data-content-overlay]");
    
    // $currentUserItem.find("[data-animated-item]").one("animationend webkitAnimationEnd oanimationend MSAnimationEnd", function(e){
    
       // console.log("$currentUserItem.offset().left: " + $currentUserItem.offset().left);      
       // console.log("$currentUserItem.offset().top: " + $currentUserItem.offset().top);

    var dotX = $currentUserItem.offset().left + userItemWidth / 2;
    var dotY = $currentUserItem.offset().top + userItemHeight / 2;
    
    var x = pageWidth / 2 + Math.abs( pageWidth / 2 - dotX );
    var y = pageHeight / 2 + Math.abs( pageHeight / 2 - dotY );
        
      var R = Math.ceil( Math.sqrt( Math.pow(x, 2) + Math.pow(y, 2) ) );
      var D = 2 * R;
    
      $contentOverlay.css({
        width: D,
        height: D,
        left: dotX - R,
        top: dotY - R
      })

      $currentUserItem.addClass("is-animated");
      $("[data-content-overlay]").addClass("is-animated").one("animationend webkitAnimationEnd oanimationend MSAnimationEnd", function(e){
        
        $currentUserItem.removeClass("is-animated");
        
        $userPlaceholder.addClass("is-active").css({
          width: userItemWidth,
          height: userItemHeight,
          marginTop: userItemHeight / 2,
          marginLeft: userItemWidth / 2,
          left: $currentUserItem.offset().left,
          top: $currentUserItem.offset().top
        });
            
        var $profilePage = $('[data-page="profile"]');
        var $profileCard = $('[data-profile-card]');
        $profilePage.addClass("is-active");
        var profileWidth = $profileCard.width();
        var profileHeight = $profileCard.height();

        $userPlaceholder.addClass("is-animated").css({
          width: profileWidth,
          height: profileHeight,
          marginTop: profileHeight / 2,
          marginLeft: profileWidth / 2,
          left: $profileCard.offset().left,
          top: $profileCard.offset().top
        }).one("transitionend webkitTransitionEnd otransitionend MSTransitionEnd", function(e){
          // $('[data-page="search"]').removeClass("is-active");
          // $userPlaceholder.removeClass("is-active");
        });
        
      });
      
    //});
    
  });
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions