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......