JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<button id="add">Add</button>
<ul class="blocks"></ul>

JavaScript

const blockWrapper = document.querySelector('ul.blocks');
const addButton = document.querySelector('button#add');
const initialArray = [{number: 1, name: 'mike'},{number: 2, name: 'charles'}];
const duration = 0.4;
const ease = Power2.easeOut;
let iterator = 2;
const listItemProps = {
  display: 'inline-block',
  width: 100,
  height: 100,
  backgroundColor: '#cfc',
  padding: 0,
  marginRight: 20,
  overflow: 'hidden'
};
const newElement = (number, name) => {
	const listItem = document.createElement('li');
  const element = document.createElement('div');
  element.innerText = `#${number} - ${name}`;
  listItem.appendChild(element);
  return listItem;
};
const onAddButtonClicked = event => {
	addButton.removeEventListener('click', onAddButtonClicked);
	event.preventDefault();
  const lastElement = document.querySelector('ul.blocks li:last-child');
  TweenMax.fromTo(lastElement, duration, {
  	x: -120
  }, {
  	x: 0,
    ease: ease
  });
  TweenMax.to(lastElement, duration, {
  	delay: duration,
  	opacity: 0,
    scale: 0.4,
    ease: ease,
    onComplete: onCompleteLastItemAnimation,
    onCompleteScope: this,
    onCompleteParams: [lastElement]
  });
  
  const firstChild = blockWrapper.firstChild;
  TweenMax.fromTo(firstChild, duration, {
  	x: -120,
  }, {
  	x: 0,
    ease: ease,
    onComplete: onCompleteMoveAnimation,
    onCompleteScope: this,
    onCompleteParams: [firstChild]
  });
  
  iterator += 1;
	const newListItem = newElement(iterator, 'hello');
  blockWrapper.insertBefore(newListItem, blockWrapper.firstChild);
	TweenMax.set(newListItem, listItemProps);
  TweenMax.from(newListItem, duration, {
  	opacity: 0,
    scale: 0.4,
    ease: ease,
    onComplete: onCompleteNewItemAnimation,
    onCompleteScope: this
  });
};
const onCompleteLastItemAnimation = lastElement => (lastElement.parentNode.removeChild(lastElement));
const onCompleteMoveAnimation = element => TweenMax.set(element, { x: 0 });
const onCompleteNewItemAnimation = () =>...