CSS Animate Div Width from Left to Right - css

Question

I'm trying to animate the width of two overlapping divs, in order to show / hide the text contained within them. I'd like one div to animate from left to right, and the other to animate from right to left, so that as one piece of text is being wiped away, the other is being revealed following it.
Here's a JS fiddle of what I've got so far, but they are both being revealed from left to right. How do I get 'cancel' to be revealed from right to left?
https://jsfiddle.net/a43wrq20/
I thought that these rules would do it, but it isn't working for me:
.foo {
right: 0;
width: 0;
}
.foo.active{
right: 0;
width: 120px;
}
Also, they both shift slightly as they're animating? Can anyone see an easy fix for this?
Thanks a lot!

Answer 1

Animate an element's width from right to left cause some issue in this case, as the animated elements child, cancel-text, is left aligned. It will look like it slides in from the right.
The simplest solution is to leave the cancel-text, and animate the login, give it a background color (so it hides the cancel), give them both an absolute position, and you'll most likely get the desired result (if I got it right)
$(document).ready(function(){
$('.clicker').on("click", function(){
// if($('.email.input').val() ){
$('.email.input').toggleClass('up');
$('.password.input').toggleClass('up');
$('.signup').toggleClass('up');
$('.login').toggleClass('up');
$('.login-text-container').toggleClass('active');
// }
});
});
.center-clicker {
display: flex;
width: 100vw;
height: 50px;
top: 5vh;
position: absolute;
}
.clicker {
position: relative;
margin: auto;
display: flex;
align-items: center;
height: 7.5vh;
background: none;
}
.clicker:hover {
cursor: pointer;
}
.text-container {
text-align: center;
height: 100%;
width: 120px;
}
.login-text {
font-family: "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
white-space: nowrap;
font-weight: 100;
font-size: 2.6em;
color: black;
}
.cancel-text {
font-family: "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 100;
font-size: 2.6em;
color: black;
}
.login-container {
height: 100%;
width: 100%;
position: absolute;
}
.login-text-container {
position: absolute;
background: white;
overflow: hidden;
left: 0;
width: 0;
-webkit-transition: width .4s;
transition: width .4s;
}
.login-text-container.active {
width: 100%;
-webkit-transition: width .4s;
transition: width .4s;
}
.cancel-container {
height: 100%;
width: 100%;
position: absolute;
}
.cancel-text-container {
position: absolute;
overflow: hidden;
width: 100%;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="center-clicker">
<div class="clicker">
<div class="text-container">
<div class="cancel-container">
<div class="cancel-text-container">
<span class="cancel-text">cancel</span>
</div>
</div>
<div class="login-container">
<div class="login-text-container active">
<span class="login-text"> log in </span>
</div>
</div>
</div>
</div>
</div>

Answer 2

I just modified the right:0; value for the .cancel-text-container to right:-110px;, and the left:0; value for the .login-text-container.active to left:10px;
Is this what you want?:
Updated Fiddle