Bug on TimelineMax.call() ?

[jorool]

Hi guys!

 

I'm developing a mobile app with computer network animations, using GSAP.

My intent is to show multiple messages to user using tl.call() function of TimelineMax, with $ionicPopup, before the animation starts.

See the code:

    function($scope, $stateParams, $ionicPopup) {
        TweenLite.defaultEase = Power1.easeInOut;

        var tl = new TimelineMax();
        tl.call(function() {
            tl.pause();
            $ionicPopup.alert({
                title: "Informação",
                template: "{{'SEQUENCE_NUMBER_PRESENTATION_1' | translate }}"
            }).then(function() {
                tl.resume();
            });
        });

        //"dummy" here

        tl.call(function() {
            tl.pause();
            $ionicPopup.alert({
                title: "Informação",
                template: "{{'SEQUENCE_NUMBER_PRESENTATION_1' | translate }}"
            }).then(function() {
                tl.resume();
            });
        });
        
        //more code
    }

The problem occurs when I call tl.call() like that, one just after other, the second does not work!

If I insert a kind of "dummy" statement between the two "calls", like "tl.to('.animationFrame', 0.5, {x: 0});", it works fine.

Can you say what is wrong in my code, or if it is a bug in GSAP?

 

Thanks.

[Carl]

Hi and welcome to the GreenSock forums.

 

It appears that you are adding both call()s at the same exact time so the second is sort of overriding the first.

a call() has no duration, so two call()s added in direct succession will fire at the same time.

 

The trick is to offset the time of the second call() using the position parameter.

This is a demo that works in a similar fashion to your code

 

http://codepen.io/GreenSock/pen/JAmba?editors=101

 

note when using the position parameter with call() you need to pass in all 4 parameters: function, params, scope and position like

tl.call(someFunction, ["someparms"], this, "+=0.2");

In the demo I created you should see how the position parameter of "+=0.2" adds the call 0.2 seconds after the previous call.

Also note the use of the addPause() method. We recommend to use addPause instead of calling another function to pause the timeline.

 

You can read about both call() and addPause() in the TimelineLite docs: http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/

 

Also, I strongly recommend reading this article on the position parameter: http://greensock.com/position-parameteras it is used in call() and many other timeline methods. 

 

It really helps though if you provide a CodePen demo that we can test, edit, fix and supply back to you as explained here:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/Please consider doing that if you still need help with this.

 

Happy Tweening!

[GreenSock]

Just one more little tid-bit to offer: callbacks fire when the playhead ARRIVES or PASSES OVER or LEAVES that particular spot on the timeline (not all three). So, for example, if you've got a callback at exactly 0.5 on a timeline and the playhead lands there exactly, obviously it should fire but let's say you pause() inside that callback. Later, when you resume, that same callback shouldn't fire again (now that the playhead is LEAVING that spot). Likewise, if you seek(0.5) and suppress events, the playhead would arrive at that spot silently (no callback fired), but then when you resume(), it should fire. It'd be a bad thing if it fired BOTH when it arrived AND when it leaves. 

 

In your example, you are pausing the timeline inside your callback which of course stops that render cycle on the timeline (the 2nd callback shouldn't fire). Then, when you resume, the timeline thinks to itself "don't fire events that are exactly at this position as I leave it because when I arrived events weren't suppressed (I don't want to risk firing them twice)". See the issue?

 

So yes, it's fine to add even 0.001 seconds of time inbetween them to avoid them sitting directly on top of each other. I just wanted to explain the why behind the behavior. As far as I can tell, it is behaving exactly as it should.