Skip to content

Instantly share code, notes, and snippets.

@chibaye

chibaye/index.html

Created May 9, 2020 12:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chibaye/2e65b8d5cfd41a6425d03aadb51c5be3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chibaye/2e65b8d5cfd41a6425d03aadb51c5be3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. chibaye created this gist May 9, 2020.
    4 changes: 4 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    <div id="line" class="left">
    <div class="circle-right" id="rightHandle"></div>
    <div class="circle-left active show" id="leftHandle"></div>
    </div>
    44 changes: 44 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    console.clear();

    const line = document.getElementById('line');
    const rightHandle = document.getElementById('rightHandle');
    const leftHandle = document.getElementById('leftHandle');

    rightHandle.addEventListener('click', (e) => {

    line.classList.remove('left');
    line.classList.add('right');

    if(!e.target.classList.contains('active')){
    leftHandle.classList.remove('active','show');

    setTimeout( () =>{
    e.target.classList.add('active');
    },300);

    setTimeout( () =>{
    e.target.classList.add('show');
    },600);

    }
    });

    leftHandle.addEventListener('click', (e) => {

    line.classList.remove('right');
    line.classList.add('left');

    if(!e.target.classList.contains('active')){

    rightHandle.classList.remove('active','show');

    setTimeout( () =>{
    e.target.classList.add('active');
    },300);

    setTimeout( () =>{
    e.target.classList.add('show');
    },600);

    }
    });
    172 changes: 172 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,172 @@
    @import url("https://fonts.googleapis.com/css?family=Fira+Sans");

    $bg : #2A3436;
    $element: #4D565B;
    $activeBorder: #589CF7;
    $border: 3px;

    html,body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: $bg;
    font-family: "Fira Sans", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    #line {
    position: relative;
    height: $border;
    width: 250px;
    background-color: $element;

    &.right::after {
    content:'';
    position: absolute;
    left: $border;
    height: 3px;
    background-color: $activeBorder;
    animation-name: left-to-right;
    animation-duration: .4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    }

    &.left::after {
    content:'';
    position: absolute;
    right: $border;
    height: 3px;
    background-color: $activeBorder;
    animation-name: right-to-left;
    animation-duration: .4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    }

    @keyframes left-to-right {
    0% {
    left:0;
    width: 0%;
    }

    50% {
    width: 35%;
    }

    100% {
    left: 100%;
    width: 0%;
    }
    }

    @keyframes right-to-left {
    0% {
    right:0;
    width: 0%;
    }

    50% {
    width: 35%;
    }

    100% {
    right: 100%;
    width: 0%;
    }
    }

    .circle-right,
    .circle-left {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: $border solid $element;
    cursor: pointer;
    background-color: $bg;
    transition: all .3s ease;
    z-index: 5;
    }

    .circle-right {
    right: calc(-15px - #{$border});

    ::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    line-height: 45px;
    font-size: 1em;
    color: $bg;
    }

    &.active {
    width: 90px;
    height: 45px;
    border-radius: 10px;
    border-color: $activeBorder;
    transition: all .3s ease;
    }

    &.show::after {
    content: 'Second';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    line-height: 45px;
    font-size: 1em;
    color: #fff;
    }
    }

    .circle-left {
    left: calc(-15px - #{$border});

    ::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    line-height: 45px;
    font-size: 1em;
    color: $bg;
    }

    &.active {
    width: 90px;
    height: 45px;
    border-radius: 10px;
    border-color: $activeBorder;
    transition: all .3s ease;
    }

    &.show::after {
    content: 'First';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    line-height: 45px;
    font-size: 1em;
    color: #fff;
    }
    }
    }
    7 changes: 7 additions & 0 deletions tabs-switch-animations.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Tabs switch animations
    ----------------------
    based on https://www.instagram.com/p/BR_2KaSArpy/

    A [Pen](https://codepen.io/shayanea/pen/yvqvro) by [Shayan](https://codepen.io/shayanea) on [CodePen](https://codepen.io).

    [License](https://codepen.io/shayanea/pen/yvqvro/license).