<div id="circle-top" class="circle"></div>
<div id="circle-bottom" class="circle"></div>

html, body {
  background: #1d1d1d;
}

.circle {
  border-radius: 80%;
  height: 40px;
  position: relative;
  width: 40px;
  background: #86CC01;
}

var tmax_options = {
  delay: 0,
  paused: false,
  onComplete: function() {
    console.log('animation is complete');
  },
  onCompleteScope: function() {
    console.log('animation scope is complete');
  },
  tweens: [],
  stagger: 0,
  align: 'normal',
  useFrames: false,
  onStart: function() {
    console.log('on start called');
  },
  onStartScope: function() {
    console.log('on start scope called');
  },
  onUpdate: function() {
    console.log('on update called');
  },
  onUpdateScope: function() {
    console.log('on update scope called');
  },
  onRepeat: function() {
    console.log('on repeat called');
  },
  onRepeatScope: function() {
    console.log('on repeat scope called');
  },
  onReverseComplete: function() {
    console.log('on reverse complete');
  },
  onReverseCompleteScope: function() {
    console.log('on reverse complete scope called');
  },
  autoRemoveChildren: false,
  smoothChildTiming: false,
  repeat: 0,
  repeatDelay: 0,
  yoyo: false,
  onCompleteParams: [],
  onReverseCompleteParams: [],
  onStartParams: [],
  onUpdateParams: [],
  onRepeatParams: []
};


var tl            = new TimelineMax(tmax_options),
    circle_top    = $('#circle-top'),
    circle_bottom = $('#circle-bottom');

tl.to(circle_top, 1, { left: 100 })
  .to(circle_bottom, 1, { top: 100 });