I'm using ElastiStack js plugin from tympanus with requireJS. ElastiStack is dependent on Draggabilly from Desandro and Modernizr. And since the Draggabilly js included on the tympanus website is an old version, I upgraded it to the latest version on Desandro's site (v1.2.4) that now supports requireJS.
And now using it with requireJS, I got an error of
ReferenceError: Draggabilly is not defined
this.draggie = new Draggabilly( this.items[ this.current ] );
You may check out the the example here (I just hosted it on a free web hosting just for this so don't mind the php error you'll see there.)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/component.css" />
</head>
<body>
<ul id="elasticstack" class="elasticstack">
<li><img src="img/1.jpg" alt="01"/><h5>Saudade</h5></li>
<li><img src="img/2.jpg" alt="02"/><h5>Tuqburni</h5></li>
<li><img src="img/3.jpg" alt="03"/><h5>Retrouvailles</h5></li>
<li><img src="img/4.jpg" alt="04"/><h5>Onsra</h5></li>
<li><img src="img/5.jpg" alt="05"/><h5>Mamihlapinatapai</h5></li>
<li><img src="img/6.jpg" alt="06"/><h5>Koi No Yokan</h5></li>
</ul>
<script data-main="js/app" src="js/require.js"></script>
</body>
</html>
APP.JS
requirejs.config({
'baseUrl': 'js', // Place all js core dependencies.
'paths': { // Path where this file is located
'draggabilly' : 'draggabilly.pkgd.min',
'modernizr' : 'modernizr.custom',
'elastistack' : 'elastiStack',
'main' : 'main',
},
'shim' : {
'elastistack' : {
deps: ['draggabilly', 'modernizr']
}
}
});
requirejs([
'elastistack',
'main'
]);
MAIN.JS
define(['jquery'], function($) {
$(function() {
var asd = new ElastiStack($('#elasticstack')[0]);
});
});