How to animate Width size from left side with JS?

Question

I'm trying to learn to how to create something similar to this animation: https://dribbble.com/shots/5311359-Diprella-Login

So currently the issue i have is when the "Green" or "Blue" in my case expands > moves > shrinks i cant get the same effect with using "Width" because it shrinks from right side, where i want it to shrink from left side after it moves.

Attaching my CodePen: https://codepen.io/MariusZMM/pen/jJWebK

JS used:

var start = anime.timeline({
  easing: 'easeInOutSine',
  autoplay: false
});

start
  .add({
    targets: '.square',
    width: 600,
    duration: 500
  })
  .add(
    {
      targets: '.square',
      translateX: 400,
      duration: 500
    },
    '-=100'
  )
  .add({
    targets: '.square',
    width: 400,
    duration: 500
  });

document.querySelector('.btn').onclick = function() {
  start.play();
  if (start.began) {
    start.reverse();
  }
};

I have also tried using Padding but i think AnimeJS does not like the values 0 0 0 300px

Answer 1

Here's a CSS only version of the animation.

I'm using a visually hidden checkbox, the button is a label which controls the checkbox, and the CSS animations are being toggled on check state.

Only thing is that it does the initial animation in reverse on load.

Edit: I actually fixed this with a slight tweak to the CSS (:not(indeterminate)) and an additional piece of JS on load that sets the checkbox to indeterminate.

const checkbox = document.getElementById('sign-in-state');
checkbox.indeterminate = true;

@keyframes login {
	0% {
		left: 0;
		width: 40%;
	}
	50% {
		width: 60%;
	}
	100% {
		left: 60%;
		width: 40%;
	}
}
@keyframes logout {
	0% {
		left: 60%;
		width: 40%;
	}
	50% {
		width: 60%;
	}
	100% {
		left: 0%;
		width: 40%;
	}
}

.sign-in-checkbox:not(:indeterminate):not(:checked) + .box .square {
  --animation-name: login;
}

.sign-in-checkbox:not(:indeterminate):checked + .box .square {
	--animation-name: logout forwards;
}

.window {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #c73030;
  z-index: 9999;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
		overflow: hidden;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  background-color: #f7986c;
  z-index: -999;
}

.square {
		animation: var(--animation-name) 600ms reverse ease-in-out;
  position: absolute;
		right: auto;
  top: 0;
  width: 40%;
  height: 100%;
  background-color: cornflowerblue;
}


.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-family: sans-serif;
  position: absolute;
  width: 200px;
  height: 70px;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #444;
}

.visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

<input type="checkbox" id="sign-in-state" class="visually-hidden sign-in-checkbox">		
<div class="box">

			<div class="square">
				<label class="btn" for="sign-in-state">
					
					<div class="sI">Sign In</div>
				</label>
			</div>

		</div>