Jump to content
Search Community

Using Scrollmagic GSAP... (beware: paused timeline inside paused timeline)

marcelde test

By marcelde
in GSAP

Moderator Tag
 Share
Go to solution Solved by marcelde,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

marcelde test

marcelde

Posted
Posted

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

 

Link to comment
Share on other sites
marcelde test

marcelde

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
marcelde test

marcelde

Posted
  • Author
Posted

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

Link to comment
Share on other sites
OSUblake test

OSUblake

Posted
Posted

Hmmm... one last test. This is the order from their starter JSFiddle.

http://jsfiddle.net/janpaepke/nLzgLL1s/

<script src="/bower_components/gsap/src/uncompressed/TweenMax.js"></script>

<!-- Put all your GSAP stuff here -->
<!-- And maybe put another library here as a buffer -->
<script src="/bower_components/toastr/toastr.js"></script>

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

Another thought. In your app, are you doing dependency injection with GSAP and/or Scrollmagic? That might be messing with their scope.

Link to comment
Share on other sites
marcelde test

marcelde

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • Solution
marcelde test

marcelde

Posted
  • Author
  • Solution
Posted

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...