marcelde

The actual problem and solution is caused by something non related to the topic title. What is the appropriated way to solve this for future readers? Can a moderator edit the topic title?

Found it! And there is something to learn! Maybe something to improve in a future version? animation.gsap.js line 210 wraps the tween in a Timeline. The problem is that I don't add a tween to the scene but a TimelineMax. This should work fine and is demonstrated by Jan Peapke. The root of the problem is that I create my TimeLineMax with the option {paused:true}. In my original source (with load error) this was a logical step, and is exactly (not knowing then) what happens on animation.gsap.js line 217 newTween.pause(); But after solving the loading error, the added paused timeline is wrapped in a paused timeline. This resulting in ...... well... a non functional result. CONCLUSION: If you add a Timeline to a Scene make sure that this Timeline is not paused (this is the default option) Suggestions: Don't wrap a Timeline in a Timeline, only wrap tweens Cascade the Pause method @OSUBlake: thks for the helpful fast response

I've took your advice to the test and messed around with the other script files. All kinds of order, in between, first, last, same results as the original test. Roll back to the same versions as in the jsFidle: Same result. Used the minified files: Same result. BUT!!! I've set a breakpoint on animation.gsap.js line 210 Scene.setTween = function (TweenObject, duration, params) { var newTween; if (arguments.length > 1) { if (arguments.length < 3) { params = duration; duration = 1; } TweenObject = Tween.to(TweenObject, duration, params); } try { // wrap Tween into a Timeline Object if available to include delay and repeats in the duration and standardize methods. if (Timeline) { //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< newTween = new Timeline({ smoothChildTiming: true }).add(TweenObject); } else { newTween = TweenObject; } newTween.pause(); } catch (e) { log(1, "ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject"); return Scene; } if (_tween) { // kill old tween? Scene.removeTween(); } _tween = newTween; And found a difference as result of the loading order. In the functional working version but with the error, TimeLine is undefined resulting the code to take the else path. Suggesting, .... do I pass the wrong object type, or something like that. But looking at the sample: http://greensock.com/timelinemax and my code: var timeline = new TimelineMax(options); Not really much that can go wrong. CONCLUSION TILL NOW: bower.json override can accept multiple main files by putting them in an array. The load order has some restrictions to prevent errors during loading The load error prevents the instantiation of the Timeline global a missing Timeline causes the execution of a other segment of code resulting (by accident?) in a functional working result. I will dive into this a little more, to be continued

Hello OSUblake, Your comment give me some new ideas on how to fight this beast. I removed all injection stuff. The index.html is composed by hand now. I removed all plugins except debug.addIndicators.js and animation.gsap.js . This are the results: <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js"></script> <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script> <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js"></script> <script src="/bower_components/gsap/src/uncompressed/TweenMax.js"></script> Functional: Ok , but (animation.gsap) -> ERROR: TweenLite or TweenMax could not be found..... <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js"></script> <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script> <!--<script src="/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js"></script>--> <script src="/bower_components/gsap/src/uncompressed/TweenMax.js"></script> Functional: Broken, no error. This as expected, but interesting is that animation.gsap.js is "causing" the error <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js"></script> <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script> <script src="/bower_components/gsap/src/uncompressed/TweenMax.js"></script> <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js"></script> Functional: Broken, no error. The error is clearly explainable. animation.gsap.js expects TweenMax.js to be loaded. So we can forget about that one. We know the cause and solution for resolving the error message. This leaves me with the big question: Why is the page functional broke if I put the load-order in the "correct?" way. To rule things out, a last experiment: <!--<script src="/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>--> <script src="/bower_components/gsap/src/uncompressed/TweenMax.js"></script> <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js"></script> <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js"></script> (animation.gsap) -> ERROR: The ScrollMagic main module could not be found...

Hello OSUblake, In deed, this is based on the work of John Papa. I use this for almost 2 years now, and it's just great. Of course I fiddled around with the overrides, but since the output in the index.html is like you would expect from the bower.json, this sounds unlikely to me. If I eliminate the complete bower gulp stuff and just include the script files manually it still goes wrong. I will do some more "manual" investigations and give an update on the results. thks for the fast response.

I'm trying to combine ScrollMagic with GSAP in my project, using bower, gulp and wiredep to add the repository files to the project. I got it working but I ran into a strange problem what is driving me nuts. If I add the dependencies in the project bower.json in the following order, everything works fine form a functional point of view, but I get an error during the page load (animation.gsap) -> ERROR: TweenLite or TweenMax could not be found. Please make sure GSAP is loaded before ScrollMagic or use an asynchronous loader like requirejs.) bower.json: "dependencies": { "jquery": "~2.1.0", "angular": "~1.3.8", "angular-sanitize": "~1.3.8", "bootstrap": "~3.2.0", "extras.angular.plus": "~0.9.2", "font-awesome": "~4.2.0", "moment": "^2.15.2", "angular-ui-router": "~0.2.12", "toastr": "~2.1.0", "angular-animate": "~1.3.8", "underscore": "^1.8.3", "scrollmagic": "^2.0.5", "gsap": "^1.19.0" }, "overrides": { "scrollmagic": { "main": [ "scrollmagic/uncompressed/ScrollMagic.js", "scrollmagic/uncompressed/plugins/animation.gsap.js", "scrollmagic/uncompressed/plugins/debug.addIndicators.js" ] } } resulting into: <!-- build:js js/lib.js --> <!-- bower:js --> <script src="/bower_components/jquery/dist/jquery.js"></script> <script src="/bower_components/angular/angular.js"></script> <script src="/bower_components/angular-sanitize/angular-sanitize.js"></script> <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="/bower_components/extras.angular.plus/ngplus-overlay.js"></script> <script src="/bower_components/moment/moment.js"></script> <script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script> <script src="/bower_components/toastr/toastr.js"></script> <script src="/bower_components/angular-animate/angular-animate.js"></script> <script src="/bower_components/underscore/underscore.js"></script> <script src="/bower_components/gsap/src/uncompressed/TweenMax.js"></script> <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js"></script> <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js"></script> <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script> <!-- endbower --> <!-- endbuild --> <!-- build:js js/app.js--> <!-- inject:js --> <script src="/src/client/app/app.module.js"></script> <script src="/src/client/app/blocks/exception/exception.module.js"></script> <script src="/src/client/app/blocks/logger/logger.module.js"></script> <script src="/src/client/app/blocks/router/router-helper.module.js"></script> <script src="/src/client/app/core/core.module.js"></script> <script src="/src/client/app/home/home.module.js"></script> <script src="/src/client/app/layout/layout.module.js"></script> <script src="/src/client/app/blocks/exception/exception-handler.provider.js"></script> <script src="/src/client/app/blocks/exception/exception.js"></script> <script src="/src/client/app/blocks/logger/logger.js"></script> <script src="/src/client/app/blocks/router/router-helper.service.js"></script> <script src="/src/client/app/core/config.js"></script> <script src="/src/client/app/core/constants.js"></script> <script src="/src/client/app/core/core.route.js"></script> <script src="/src/client/app/core/dataservice.js"></script> <script src="/src/client/app/home/home.controller.js"></script> <script src="/src/client/app/home/home.route.js"></script> <script src="/src/client/app/layout/shell.controller.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/easing/CustomBounce.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/easing/CustomEase.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/plugins/DrawSVGPlugin.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/plugins/MorphSVGPlugin.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/plugins/Physics2DPlugin.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/plugins/PhysicsPropsPlugin.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/plugins/ScrambleTextPlugin.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/plugins/ThrowPropsPlugin.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/utils/SplitText.js"></script> <!-- endinject --> This makes sense, and is a easy fix by changing the load order of scrollmagic and gsap. But after swapping the order, the error is gone, but..... ScrollMagic Scenes using a tween or timeline, stopped working. The load order is now the following: <!-- build:js js/lib.js --> <!-- bower:js --> <script src="/bower_components/jquery/dist/jquery.js"></script> <script src="/bower_components/angular/angular.js"></script> <script src="/bower_components/angular-sanitize/angular-sanitize.js"></script> <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="/bower_components/extras.angular.plus/ngplus-overlay.js"></script> <script src="/bower_components/moment/moment.js"></script> <script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script> <script src="/bower_components/toastr/toastr.js"></script> <script src="/bower_components/angular-animate/angular-animate.js"></script> <script src="/bower_components/underscore/underscore.js"></script> <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js"></script> <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js"></script> <script src="/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script> <script src="/bower_components/gsap/src/uncompressed/TweenMax.js"></script> <!-- endbower --> <!-- endbuild --> <!-- build:js js/app.js--> <!-- inject:js --> <script src="/src/client/app/app.module.js"></script> <script src="/src/client/app/blocks/exception/exception.module.js"></script> <script src="/src/client/app/blocks/logger/logger.module.js"></script> <script src="/src/client/app/blocks/router/router-helper.module.js"></script> <script src="/src/client/app/core/core.module.js"></script> <script src="/src/client/app/home/home.module.js"></script> <script src="/src/client/app/layout/layout.module.js"></script> <script src="/src/client/app/blocks/exception/exception-handler.provider.js"></script> <script src="/src/client/app/blocks/exception/exception.js"></script> <script src="/src/client/app/blocks/logger/logger.js"></script> <script src="/src/client/app/blocks/router/router-helper.service.js"></script> <script src="/src/client/app/core/config.js"></script> <script src="/src/client/app/core/constants.js"></script> <script src="/src/client/app/core/core.route.js"></script> <script src="/src/client/app/core/dataservice.js"></script> <script src="/src/client/app/home/home.controller.js"></script> <script src="/src/client/app/home/home.route.js"></script> <script src="/src/client/app/layout/shell.controller.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/easing/CustomBounce.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/easing/CustomEase.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/plugins/DrawSVGPlugin.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/plugins/MorphSVGPlugin.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/plugins/Physics2DPlugin.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/plugins/PhysicsPropsPlugin.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/plugins/ScrambleTextPlugin.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/plugins/ThrowPropsPlugin.js"></script> <script src="/src/client/app/lib/GreenSock-BusinessGreen-js/src/uncompressed/utils/SplitText.js"></script> I'm clearly missing something......