A Pen by Hubert Iwaniuk.

index.html

<div class="container">
    <div class="panel">Center</div>
    <div class="panel right">Right</div>
</div>

script.js

var container = document.querySelector(".container"),
    center = document.querySelector(".panel"),
    right = document.querySelector(".right");

container.addEventListener("mouseenter", function (x) {
    right.classList.remove("right");
    center.classList.add("left");
});
container.addEventListener("mouseleave", function (x) {
    center.classList.remove("left");
    right.classList.add("right");
});

Slide-into-view-from-right.markdown

Slide into view from right

On :hover next element slides into view. Sliding is done with CSS Transitions. Only JS used is to add remove classes on mouseenter and mouseleave.

A Pen by Hubert Iwaniuk on CodePen.

License.

style.css

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    position: relative;
    width: 35em;
    height: 20em;
    background-color: lightgreen;
    overflow-x: hidden;
    border: solid darkgreen;
}
.panel {
    width: 100%;
    height: 100%;
    background-color: lightblue;
    border: solid darkblue;
    position: absolute;
    left: 0px;
    top: 0px;
    transition: left 1s;
    text-align: center;
    font-size: 2em;
}
.left {
    position: absolute;
    left: -100%;
    top: 0px;
    transition: left 1s;
    background-color: lightgray;
    border: solid darkgray: ;
}
.right {
    position: absolute;
    left: 100%;
    top: 0px;
    transition: left 1s;
    background-color: lightgray;
    border: solid darkgray: ;
}