Issue with creating new scene for each element of a class

[Randyhuls]

So I'm trying to create a new scene with the same tween for each element of a class, but for some reason the starting position for all the instances is the first element in the list. The idea is that when you pass each element, they do a slight turn in angle. I'm staring myself blind at it, but haven't been able to fix it thus far. Any suggestions perhaps? Thanks in advance!

var aniTarget = document.querySelectorAll('.item-animation');
var controller = new ScrollMagic.Controller();  
    for(i = 0; i < aniTarget.length; i++){
        var tween = TweenMax.to(aniTarget[i] , 1, {rotationX:90});

        new ScrollMagic.Scene({
                duration: 300,
                triggerElement: aniTarget[i],
                triggerHook: "onCenter",
        })              
        .setTween(tween)
        .addIndicators()
        .addTo(controller);
    }   

[dirad]

just starting with Scrollmagic, and this is what i need as well..

    $.each(panels, function(i, el) {
        var scene = new ScrollMagic.Scene({
          duration: 220, 
          triggerElement: '.hentry',
          loglevel: 3,
          triggerHook: 0
        })
        .setPin('.panel')
        .addTo(controller);
    });

but i get nested div with scollmagic on the first .panel in the page

[Randyhuls]

Anyone?