Animator Layout

by amindunited

HTML

<div class="app">
  <div class="container">
    
  </div>
  <div class="frames-container">
    
  </div>
  <div class="editor-controls">
    
  </div>
</div>

CSS

.app {
  border-radius: 1rem;
  border: solid 1px gray;
  background-color: white;
  min-height: 50vh;
  padding: 1rem;
}
.container {
  border-radius: 1rem;
  border: solid 1px gray;
  height: 25vw;
}
.frames-container {
  height: 2rem;
  border-radius: 1rem;
  border: solid 1px gray;
  overflow: hidden;
  display: flex;
  gap: 0.1rem;
}
.frame-icon {
  height: 1.8rem;
  border-radius: 0.5rem;
  border: solid 1px gray;
  width: 1rem;
  display: inline-block;
}

JavaScript

const fps = 24;
const length_in_seconds = 1;


const createFrameIcon = () => {
  const el = document.createElement('div');
	const framesClass = `frame-icon`;
  el.classList.add(framesClass);
  return el;
}

const redrawFramesView = () => {
	const totalFrames = length_in_seconds * fps;
  const container = document.querySelector('.frames-container');
  const framesClass = `frame-icon`;
  const childElements = Array.from({length: totalFrames}, (v, i) => {
		const className = `frame-icon-${i+1}`
    const el = createFrameIcon();
    el.classList.add(className);
    container.appendChild(el);
    return el;
  });
}

redrawFramesView();