use the same class to animate on view with scrollmagic

Question

I am pretty new to scrollmagic and i am looking to use a single class multiple times throughout a page to animate when it comes into view. Is this possible?

see pen

Any pointers welcome.

$(function() {
    controller = new ScrollMagic();
    var tween5 = TweenMax.to(".animate", 0.5,{scale: 1.02,
    backgroundColor: 'rgb(255, 39, 46)'
    });
    var scene5 = new ScrollScene({
            duration: 200,
            triggerElement: ".animate",
            triggerHook: "onCenter",
        })
        .setTween(tween5)
        .addTo(controller);

      scene5.addIndicators();
});

Answer 1

To know how to solve this you need to know how the two frameworks react to multiple elements being supplied (which is essentially what you do if you supply a class that resolves to more than one element).

TweenMax will animate all elements at the same time, while ScrollMagic can only have one trigger element per scene (because there can only be one start and end per scene), which is why it will use the first element of the matched set.

So logically your above code results in all the elements being animated, as soon as the first one passes the trigger.

To solve this you'll have to define a scene for each element:

$(function() {
    controller = new ScrollMagic();
    $(".animate").each(function (index, elem) {
        var tween = TweenMax.to(elem, 0.5,
                               {scale: 1.02, backgroundColor: 'rgb(255, 39, 46)' }
                    );
        new ScrollScene({
                duration: 200,
                triggerElement: elem,
                triggerHook: "onCenter",
            })
            .setTween(tween)
            .addTo(controller)
            .addIndicators();
    });
});

Updated pen: http://codepen.io/janpaepke/pen/JoygRd