"Error calling method 'setTween()' [...]" with v1.2.1

[wrthwhl]

Hi

I'm having an issue with the latest (1.2.1) version of the ingenious ScrollMagic.

Following my JS...

var controller = new ScrollMagic({loglevel:3});
var tween = TweenMax.to(".panel.welcome", 0.5, {backgroundColor: "green", scale: 2.5});
var scene = new ScrollScene({triggerElement: "#panels", loglevel: 3})
                                .setTween(tween)
                                .addTo(controller);

...resulting in the following console-log:

21:28:16:307 (ScrollMagic) -> added new ScrollMagic controller (vundefined)
21:28:16:314 (ScrollScene) -> ERROR calling method 'setTween()': Supplied argument is not a valid >TweenObject
21:28:16:314 (ScrollScene) -> added tween
21:28:16:316 (ScrollScene) -> added ScrollScene to controller
21:28:16:316 (ScrollMagic) -> added Scene (1 total)
21:28:16:346 (ScrollMagic) -> updating Scene 1/1 (1 total)
21:28:16:347 (ScrollScene) -> event fired: update -> Object {startPos: -535, endPos: -535, scrollPos: 0}
21:28:16:349 (ScrollScene) -> event fired: enter -> Object {progress: 1, state: "DURING", scrollDirection: "PAUSED"}
21:28:16:350 (ScrollScene) -> event fired: start -> Object {progress: 1, state: "DURING", scrollDirection: "PAUSED"}
21:28:16:351 (ScrollScene) -> event fired: progress -> Object {progress: 1, state: "DURING", scrollDirection: "PAUSED"}

Thing is that if I go with version 1.0.9 the error disappears. With version 1.0.9 for the core and the latest (v1.2.1) debug extension I get the following Uncaught Type Error:

21:49:48:229 (ScrollScene) -> added tween
21:49:48:235 (ScrollScene) -> added ScrollScene to controller
Uncaught TypeError: undefined is not a function
ScrollScene.updateIndicators
ScrollScene.addIndicators
(anonymous function)
j
k.fireWith
m.extend.ready
J
21:49:48:261 (ScrollScene) -> event fired: update -> Object {startPos: 0, endPos: 7380, scrollPos: 0}

I hope this of any use.

Thank you heaps for ScrollMagic. I'm a huge fan.

Cheers
Marco

[janpaepke]

Hi Marco,

The error occurs if the element can not be added as a Tween.
Please make sure you have GSAP loaded and it works, when you follow the guide in the support guidelines.
I for one have pasted your code in a current fiddle, and it works like a charm:
http://jsfiddle.net/janpaepke/r3urp7eu/
Do you have the most recent version of GSAP loaded?
Please try to reproduce your issue in a fiddle...

As for mixing the versions this may very well be because 1.1.x is not 100% compatible with 1.0.x.
Please use both the debug extension and

[wrthwhl]

Hi Jan

Many thanks for the speedy response!
I spent my afternoon fiddling around a bit and for the most part I was just really confused as to why one fiddle would work while the other doesn't. Then it finally dawned on me that the difference lies in the order the external libs are loaded in: v1.2.1 seems to rely on the TweenMax lib being loaded before the ScrollMagic lib. I took your fiddle and changed the order the libs are loaded in... et voilà!
Version 1.1.0 (and earlier as it appears) don't seem to care much.

I apologise that I wasn't able to isolate the problem before I originally posted this. Just really didn't think of that at all.

Best
Marco

[janpaepke]

Hi Marco,

thanks for getting to the bottom of this.
I'll fix this soon...

regards,
J

[janpaepke]

Hi Marco,
So the reason is that since ScrollMagic 1.2 it is actually possible to load it asynchronously using require.js and the AMD pattern.
In a synchronous loading environment it is expected that dependencies are loaded first.
For example you wouldn't expect your jQuery plugins to work before loading jQuery.

I did however correct the error handling for this case and future users will have a better idea of what went wrong.
If you check your fiddle now, you will see a different error message.

Thank you for your help in getting to the bottom of this.

regards,
J

[krnlde]

Seems I fell in this trap, too ;) Thanks for the explanation on how to fix it

[famicomboy]

I'm getting this issue as well. I'm making a single page app with Webpack and Angular. Currently using ScrollMagic 2.0.5, GSAP 1.18.2.

Setup of my code: All the page routes are broken up into chunks to allow conditional loading of the site. I mention this because it's making working with 3rd party frameworks like this a bit more complicated to work with. Anyway, adding in the correct WP aliases (from this comment) I finally got the debug indicators working. However, on trying to add a GSAP tween via setTween() I get the same error as the OP.

ScrollMagic.js:261721:34:56:350 (ScrollMagic.Scene) -> (animation.gsap) -> ERROR calling method 'setTween()': Supplied argument is not a valid TweenObjectScrollMagic._util.U.log @ ScrollMagic.js:2617log._log @ ScrollMagic.js:1212log @ animation.gsap.js:112Scene.setTween @ animation.gsap.js:225link @ scrollmagic-scene.directive.js:68(anonymous function) @ angular.js:9486invokeLinkFn @ angular.js:9492nodeLinkFn @ angular.js:8978compositeLinkFn @ angular.js:8226compositeLinkFn @ angular.js:8229publicLinkFn @ angular.js:8106(anonymous function) @ angular.js:8447boundTranscludeFn @ angular.js:8244controllersBoundTransclude @ angular.js:9020ngRepeatAction @ angular.js:28571$watchCollectionAction @ angular.js:16527Scope.$digest @ angular.js:16664(anonymous function) @ angular.js:16859completeOutstandingRequest @ angular.js:5804(anonymous function) @ angular.js:6081
scrollmagic-scene.directive.js:33scrollmagic directive link

I've confirmed that the tween itself does run without adding it to ScrollMagic, so I doubt that's the issue. I wonder if it has something to do with gsap not returning a global TweenMax variable when I require it. This is how I call a tween:

var gsap = require('TweenMax'); 

module.exports = function() {
  var tween = gsap.TweenMax.to(el, duration, vars.....)};
}

I look at the animation.gsap.js plugin and it's expecting "TweenMax" to just be available, but when I log out the "TweenMax" variable, it's returning the wrapper "gsap" object, so it has the easing functions, TweenMax class instance, etc, instead of the "to", "from", functions. I'm super new to this require world so I may just be completely misunderstanding how to load certain packages like this.

For reference, here's the module I'm trying to use this in: (being used as an Angular directive)

`'use strict';

var $ = require('jquery');

var gsap = require('TweenMax');
var TweenMax = gsap.TweenMax;
var TimelineMax = gsap.TimelineMax; //require('TimelineMax');
var ScrollMagic = require('ScrollMagic');
require('animation.gsap');
require('debug.addIndicators');
var template = require('templates/partials/content-slide-item.html');

module.exports = function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var tween = TweenMax.to($(element).find(".title"), 1.0, {opacity: 0, repeat: 1000, yoyo: true});
            var controller = scope.controller;

            new ScrollMagic.Scene({
                duration: 1000,
                triggerElement: $(element).find('.sticky-trigger')[0]
            })
                .addIndicators()
                .setTween(tween)
                .addTo(controller);


        },
        template: template,
        scope: {
            data: '=',
            controller: '='
        }
    }
};
`

[krnlde]

@famicomboy did you take care of the AMD loading style? E.g. Require.js or System.js or browserify.

[famicomboy]

I'm a little unsure on that. I see that scrollmagic itself uses the define() method that webpack is looking for, but other than that I'm just using the require() method to load it.

[famicomboy]

Sorry everyone, I figured out my issue was unrelated to ScrollMagic. I apologize, this probably should've been a Stack Overflow post but I saw that this issue was the same error I was getting so thought it was better to put here.

[krnlde]

Could you still provide some insights for others who get caught by the same mistake?

[famicomboy]

The problem is I started out with this yeoman generator which installed a loader for GSAP files:
"animation.gsap": 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js',

This was wrapping the module up in a container, making the TweenMax, TimelineMax etc variables inaccessible when loaded with require(); Disabling this loader made the dependent variables accessible to the animation plugin.