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();
});

Much appreciated this makes perfect sense. Thank you so much. — hamish mckay, Feb 02 '15 at 20:18

score 10 · Answer 1 · answered Jan 31 '15 at 10:22

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

Much appreciated this makes perfect sense. Thank you so much. — hamish mckay, Feb 02 '15 at 20:19
If you get a `Uncaught ReferenceError: ScrollScene is not defined` message, you can use `ScrollMagic.Scene()` instead of `ScrollScene()` — Klemart3D, Feb 03 '21 at 08:32

score 0 · Answer 2 · answered Jan 01 '19 at 16:32

scrollmagic triggerElement hook dynamically added new 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();
});
});

use the same class to animate on view with scrollmagic

2 Answers2