JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jmpress/0.4.5/jmpress.all.js"></script>
<div ng-app="app" ng-controller="randomData" ui-impress>
    <div ng-repeat="item in data"
         class="step"
         data-duration="2000"
         data-x="{{ item.coordinates.x }}"
         data-y="{{ item.coordinates.y }}"
         data-z="{{ item.coordinates.z }}"
         data-rotate-x="{{ item.rotate.x }}"
         data-rotate-y="{{ item.rotate.y }}"
         data-rotate-z="{{ item.rotate.z }}"
         data-scale="{{ item.scale }}"
    >
        {{ item.message }}
    </div>
</div>

CSS

/** ANIMATION **/
.step {
    opacity: 0.1;
    width: 20em;
    height: 3em;
}

.step.active {
    -webkit-transition: opacity 1s;
	-moz-transition:    opacity 1s;
	-ms-transition:     opacity 1s;
	-o-transition:      opacity 1s;
	transition:         opacity 1s;

	opacity: 1;
}

JavaScript

var app = angular.module("app", []);

app.directive('uiImpress', function() {
    return {
        restrict: 'A',
        scope: false,
        link: function($scope, $element) {            
            $(document).ready(function() {
                $($element).jmpress();                    
            });
        }
    };
});

function randomData($scope, $http) {
    $scope.data;
    var slides = 10;
    
    var config = {
        coordinates: [ -1000, 1000 ],
        rotate: [ -180, 180 ],
        scale: [ 0.1, 10 ]
    };
    
    function getRandomInt (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    
    function generateData() {
        return _.range(slides).map(function(value, index) {
            return {
                message: 'hello world!',
                coordinates : {
                    x: getRandomInt.apply(null, config.coordinates),
                    y: getRandomInt.apply(null, config.coordinates),
                    z: getRandomInt.apply(null, config.coordinates)
                },
                rotate: {
                    x: getRandomInt.apply(null, config.rotate),
                    y: getRandomInt.apply(null, config.rotate),
                    z: getRandomInt.apply(null, config.rotate)
                },
                scale: getRandomInt.apply(null, config.scale)
            };
        });
    }
    $scope.data = generateData();
};