JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<main>
  <div id="video-feed"></div>
  <div id="notifications">
  </div>
</main>

CSS

html, body, main {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000;
  font-family: sans-serif, Areal;
}

.pin {
  position: absolute;
  left: -25%;
  top: 0%;
  background: url("https://upload.wikimedia.org/wikipedia/commons/d/d1/Google_Maps_pin.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 20%;
  height: 100%;
}

.notification-follow {
  display: grid;
  grid-template-columns: auto 1fr;
  /* height */: 10em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.notification-text {
  display: grid;
  grid-template-rows: repeat(3, auto);
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 3em;
}


#video-feed {
  background: url("https://media.discordapp.net/attachments/543468182636199936/718312226116599829/unknown.png?width=987&height=677");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

JavaScript

window.onload = () => {

  let event = {username: "TheLifeIsYours"}

  window.addEventListener('click', () => {
    addPin(event);
  });

  function addPin(event) {
    let user = event.username;

    let notificationText = `
        <div class="notification-text">
          <div>New follower!</div>
          <div>${encodeHTML(event.username)}</div>
        </div>
    `;

    let newNotification = document.createElement('div');
    newNotification.classList.add('notification-follow');

    newNotification.innerHTML = notificationText;

    let newPin = document.createElement('div');
    newPin.classList.add('pin');
    new Pin(newPin, {x: 50, y: 50}, 100);
    
    newNotification.append(newPin);
    
    document.querySelector('#notifications').append(newNotification);

  }
  
  class Pin {
  	constructor(element, target, speed) {
    	this.element = element;
      this.target = target;
      this.speed = speed;
      
      this.pos = this.getPosition();
      this.startPos = this.pos;
      
      this.distance = this.getComponentDistance(this.pos, this.target);
      console.log(this.distance);
      
      this.offset = {x: 0, y: 0};
      
      this.targetReached = false;
      
      this.runTransition();
    }
    
    update(){
    	this.pos = this.getPosition();
      this.distance = this.getComponentDistance(this.pos, this.target);
    
    	this.offset.x = this.distane.x / this.pos.x;
      
      if(Math.floor(this.pos.x) == this.target.x && Math.floor(this.pos.y) == this.target.y) {
      	this.targetReached = true;
      }
    }
    
    render(){
    	this.element.style.transform = `translate(${this.offset.x}px, ${this.offset.y}px)`;
    }
    
    runTransition(){
   		this.update();
      this.render();
          
    	if(this.targetReached == false) {  
      	setTimeout(() => {
        	this.runTransition();
        }, this.speed);
      } else {
    		this.element.parentNode.remove();
      }
    }
    
    getPosition(){
    	return...