CODEWITHSUNDEEP
javascriptanimationgsapscrollmagic
Khudo Ihor
Khudo Ihor

Reputation: 48

Reuse tweens in different ScrollMagic scenes

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?

Upvotes: 2

Views: 2387

Answers (1)

Jan Paepke
Jan Paepke

Reputation: 2027

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

Upvotes: 1

Related Questions