Edit in JSFiddle

var type = 1, //circle type - 1 whole, 0.5 half, 0.25 quarter
    radius = '12em', //distance from center
    start = -90, //shift start from 0
    reverseOrder = false, //reverse order of items
    $list = $('ul'),
    $items = (reverseOrder) ?  $($list.children('li:not(:first-child)').get().reverse()) : $list.children('li:not(:first-child)'),
    numberOfItems = (type === 1) ?  $items.length : $items.length - 1, //adj for even distro of elements when not full circle
    slice = 360 * type / numberOfItems,
    timeLine = new TimelineLite({'paused': true});

$items.each(function(i) {
    var $self = $(this),
        rotate = slice * i + start,
        rotateReverse = rotate * -1;
    
    timeLine.to($self, 0.25, {'opacity': 1,'transform': 'rotate(' + rotate + 'deg) translate(' + radius + ') rotate(' + rotateReverse + 'deg)'}, '+=0.25');
});

$('#show').on('click', function(e) {
    timeLine.play();
});

$('#hide').on('click', function(e) {
    timeLine.reverse();
});

<p>
    Inspired by this <a href="http://stackoverflow.com/questions/12813573/position-icons-into-circle" target="_blank">Stack Overflow</a> question.
</p>
<button id="show">Show</button><button id="hide">Hide</button>
<ul>
    <li>Center</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>

ul {
    position: relative;
    top: 200px; left: 200px; /*for example purposes only*/
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    display: inline-block;
    position: absolute;
}
li:not(:first-child) {
    opacity: 0;
}