<div id="rod">
  <div id="pivot"></div>
  <div id="ball"></div>
</div>
#rod {
  position: relative;
  margin-top: 50px;
  margin-left: 150px;
  width: 2px;
  height: 150px;
  border-radius: 5px;
  transform-origin: 50% 0%;
  transform: rotate(60deg);
  background-color: green;
}

#pivot {
  position: absolute;
  top: -5px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: black;
}

#ball {
  position: absolute;
  bottom: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: orange;
}
let animation = anime({
  targets: '#rod',
  rotate: [60, -60],
  duration: 3000,
  easing: 'easeInOutSine',
  direction: 'alternate',
  loop: true
});      
  



        
 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js