Reuse tweens in different ScrollMagic scenes

Question

I am new to scrollmagic and I want to use same tween on different triggers to avoid code repeting. For example:

var controller, firstTween, secondTween;

controller = new ScrollMagic;

firstTween = TweenMax.to($('body'), .1, {
  backgroundCoror: "#ff0000"
});

secondTween = TweenMax.to($('body'), .1, {
  backgroundCoror: "#ffffff"
});

controller.addScene([
  new ScrollScene({
    triggerElement: '#triggerOne'
  }).setTween(firstTween), new ScrollScene({
    triggerElement: '#triggerTwo'
  }).setTween(secondTween), new ScrollScene({
    triggerElement: '#triggerThree'
  }).setTween(firstTween), new ScrollScene({
    triggerElement: '#triggerFour'
  }).setTween(secondTween)
]);

But works only two last scenes. To make it work I must to repeat tweens in each scene. It is possible to make reusable tweens?

score 1 · Accepted Answer · answered Feb 09 '15 at 09:30

Short answer: No - A tween object can only be assigned to one scene and vice versa.

To avoid code repetition, create the scenes in a loop, like this:

var var controller, firstTween, secondTween,
triggers = ["triggerOne", "triggerTwo", "triggerThree", "triggerFour"];

controller = new ScrollMagic();

triggers.forEach(function (trigger, index) {
    // make tween
    var thistween = TweenMax.to($('body'), .1, {
        backgroundColor: (index % 2) ? "#ffffff" : "#ff0000"
    });
    // make scene
    new ScrollScene({
        triggerElement: '#' + trigger;
    })
    .setTween(thistween)
    .addTo(controller);
});

Please also mind that if the triggers are in short succession you might get problems with tweens overwriting each other. To find out more why this is happening and how to resolve it, read here:
https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another

Reuse tweens in different ScrollMagic scenes

1 Answers1