There are a few problems but the main one is when sidebarEffects.js is loaded the HTML it’s looking for doesn’t exist yet. So…
var container = document.getElementById( 'st-container' )
// and
buttons = Array.prototype.slice.call( document.querySelectorAll( '#st-trigger-effects > button' ) )
are both empty when the script is run.
Easiest way to fix it is to put your <script> tags right before the close of your <body> tags instead of in the <head>. If you’re including these files into your theme manually, no problem, just stick them in your theme’s equivalent to footer.php. If you’re enqueueing them, see the $in_footer param here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script
You also have two containers with the id="st-trigger-effects". See here: https://html5.validator.nu/?doc=http%3A%2F%2Fchocobento.x10.mx%2Fwp%2F