Component

Generated using Anima App

HTML

<div class="cup">
  <img class="cupback" src="https://img.animaapp.com/Qu0cteI/cup-cup-back@2x.png"/>
  <div class="coffee">
  </div>
  <img class="whiteoverlayhidescoffeeoutofglass" src="https://img.animaapp.com/Qu0cteI/cup-white-overlay---hides-coffee-out-of-glass.png"/>
  <img class="cupfront" src="https://img.animaapp.com/Qu0cteI/cup-cup-front@2x.png"/>
</div>

CSS

.cup {
  opacity: 1;
  width: 181px;
  height: 166px;
  pointer-events: none;
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.0);
}

.cup .cupback {
  opacity: 1;
  width: 167px;
  top: 2px;
  height: 157px;
  pointer-events: none;
  position: absolute;
  left: 9px;
  background-color: rgba(255, 255, 255, 0.0);
}

.cup .coffee {
  opacity: 1;
  width: 130px;
  top: 106px;
  height: 49px;
  pointer-events: none;
  position: absolute;
  left: 13px;
  background-color: rgba(63, 29, 0, 1.0);
}

.cup .whiteoverlayhidescoffeeoutofglass {
  opacity: 1;
  width: 153px;
  top: 0px;
  height: 166px;
  pointer-events: none;
  position: absolute;
  left: 0px;
  background-color: rgba(255, 255, 255, 0.0);
}

.cup .cupfront {
  opacity: 1;
  width: 168px;
  top: 2px;
  height: 156px;
  pointer-events: none;
  position: absolute;
  left: 9px;
  background-color: rgba(255, 255, 255, 0.0);
}


.transition0-0-0 .coffee {
  animation: transition0-0-0 0.7s cubic-bezier(0.71, 0.43, 0.22, 0.77) 0s 1 forwards;
  -o-animation: transition0-0-0 0.7s cubic-bezier(0.71, 0.43, 0.22, 0.77) 0s 1 forwards;
  -moz-animation: transition0-0-0 0.7s cubic-bezier(0.71, 0.43, 0.22, 0.77) 0s 1 forwards;
  -webkit-animation: transition0-0-0 0.7s cubic-bezier(0.71, 0.43, 0.22, 0.77) 0s 1 forwards;
}
@keyframes transition0-0-0 {
  from {
    top: 106px;
  height: 49px;
  }
  to {
    top: 34px;
  height: 121px;
  }
}
@-o-keyframes transition0-0-0 {
  from {
    top: 106px;
  height: 49px;
  }
  to {
    top: 34px;
  height: 121px;
  }
}
@-moz-keyframes transition0-0-0 {
  from {
    top: 106px;
  height: 49px;
  }
  to {
    top: 34px;
  height: 121px;
  }
}
@-webkit-keyframes transition0-0-0 {
  from {
    top: 106px;
  height: 49px;
  }
  to {
    top: 34px;
  height: 121px;
  }
}

.keyframe1 .coffee {
  pointer-events: none;
  overflow: hidden;
  height: 121px;
  position: relative;

}

JavaScript

function addClass (object, className) {
  object.classList ? object.classList.add(className) : object.className += ' ' + className;
}

function removeAllClassesButFirst (component, skipClass) {
  console.log('Resetting state');
  var classList = component.classList;
  var componentClass = classList.item(0);
  var toRemove = [];
  classList.forEach(function(className) {
    if (className != skipClass && className != componentClass) {
      toRemove.push(className);
    }
  });
  toRemove.forEach(function(className) {
    classList.remove(className);
  });
}

function applyState (component, stateClass) {
  var componentClass = component.classList.item(0);
  component.className = componentClass;
  component.classList.add(stateClass);
}

function isCurrentState (component, state) {
  return component.classList.contains(state)
}

var component = document.querySelectorAll('.cup')[0];
addClass(component, 'state0');

console.log('Longest animation for transition 0: transition0-0-0');

function applyTransition0() {
  console.log('applyTransition0');
  addClass(component, 'transition0-0-0');
}

// Transition 0 Event Handlers
function transition0EndedHandler(event) {
  if (event.animationName == 'transition0-0-0') {
    removeAllClassesButFirst(component, 'keyframe1');
    addClass(component, 'keyframe1');
    console.log('Transition 0 ended');
  }
}

function click0Handler(event) {
  if (isCurrentState(component, 'state0')) {
    try {
      console.log('Listener for event: click triggered. State: state0');
      removeAllClassesButFirst(component, 'state0');
      applyTransition0();
    }
    catch (e) {}
  }
}


// Transition 0 Event Listeners

component.style['pointer-events'] = 'auto';
component.addEventListener('click', click0Handler);
child = component.querySelector('.coffee');
if (child) {
  child.addEventListener('animationend', transition0EndedHandler);
}

var event = new Event('click');
component.dispatchEvent(event);