electrichead

Ah, thank you so much for that explanation! I didn't consider that the outer timeline would keep running through the execution of the onComplete. It makes total sense now. Thanks for the help to both of you!

I'm moving this into a new topic from a reply in another topic. I've created a codepen: http://cdpn.io/tlmGg The issue is that (starting from fresh page), clicking "+" to play the timeline one or more times and then clicking "-" to reverse it doesn't reverse the timeline immediately. The onReverseComplete is called right away without anything being done. You have to press "-" again causes it to do the desired thing. After doing that a few times (or once), clicking the opposite direction ("+") again triggers the onComplete without actually playing. Any ideas as to why it remains paused when "changing play directions" (i.e. from "play" to "reverse" or vice versa)? Does it immediately fire the onComplete/onReverseComplete when you change directions? If so, is this intentional behaviour?

I'm not sure they are unrelated, but I will create a new post. I don't see an option to delete the post though.

I do think that the answer above is much better; but I have also come across a problem with the onComplete callbacks in nested TimelineMax's. If you have a TimelineMax with some TimelineMax's inside it, and each of those has an onComplete below: onComplete: function() { someCounter++; this.tl.pause(); }, onCompleteScope: scope, onReverseComplete: function() { someCounter--; this.tl.pause(); }, onReverseCompleteScope: scope where scope has a variable tl that is the outer TimelineMax; calling play() multiple times will do the correct thing and play the inner sequences one at a time. However, when you call reverse() after calling play() or vice versa, calling play() after reverse(), the outer timeline is paused immediately (i.e. onReverseComplete is called immediately without the timeline actually reversing). It seems that when changing directions in this scenario, the timeline is automatically paused. When calling the same action multiple times e.g. play() followed by more play()'s, it is fine. In the outer timeline, I have specified paused:true I am not sure if that would cause the issue to happen?

I think there is a bug where animating the CSS with this: { x: '-100%' } leads to this (I am in Chrome): { -webkit-transform: translate3d(-100px, 0px, 1px); } However, if I set the CSS manually to "-100%" it works beautifully. Is this a bug or is there something I need to do differently?

Thank you for the replies. I am currently trying to use the algorithms at the link above (not fully in English) and this link: http://www.themaninblue.com/experiment/Blobular/ I'll post if I make any headway.

Hi, I was wondering if there is any help out there to create a metaball effect with two 2D circles. I am using Raphael to create the 2D shapes. Is this something that needs to be done within Raphael? The effect I am going for is that there are a bunch of indicators moving vertically down a line at varying speeds. When they get close enough, I would like to animate them with a metaball effect so that the circles merge together and a number is displayed to show how many are in the cluster. Is there any help out there to construct something like this? The bezier plugin only does tweening "along a bezier path," if I am not mistaken - it won't do a shape tween using beziers?

Hi there, I tried various things and in the end I did get it to work; but I forget exactly which change was responsible. I think it was that I had to provide an initial zeroed transform for the element in the CSS. The tweening worked after I did that. -ms-transform:translate3d(0%,0px,0px); -webkit-transform:translate3d(0%,0px,0px); transform:translate3d(0%,0px,0px); my tween is { x:elem.width() + 'px' } Thanks for the help!

Thanks for the tip, but this breaks it altogether for me in all browsers. The -webkit-transform:translate3d(0px,0px,0.01px); somehow stops all my event listeners for clicks on any items inside the container.

I forgot to add this link in the question: https://github.com/greensock/GreenSock-JS/blob/master/changelog.txt In the entry that says I wonder if this same issue has resurfaced?

Hello, I am experiencing an edge-case error in the Android stock browser: I am using greensock to animate a "shopping cart" drawer from the top of the screen. The shopping cart items scroll horizontally within that drawer when it is extended. In order to move it, I am animating the CSS "top" property. i.e. css: {top:"+=255px", "z:0.01"} I added the z:0.01 to make it smooth on Android Chrome and iOS, but in the stock browser, it is better without that property. Also, when the shopping cart items are wider than the screen width (there is an overflow:hidden on the cart div), the shopping cart animation to open/close doesn't work at all in the stock browser unless that " z:1" is removed. Any ideas on how I can either detect the stock browser and avoid that property, or if there is a way to force it to work?

That was exactly it! You have no idea how many days I spent examining it and going over it piece-by-piece. If anyone else experiences this issue, you need to pass in $rootScope to onCompleteScope. Thanks much! That is an amazing response and response time.

Hi, I was wondering if there is some kind of interaction happening that would prevent a deferred from being resolved in the onComplete event of TimelineLite? I have tried a bunch of things to get it to resolve, but it never does: passing in the object, having the deferred be a local variable in the outer scope, etc. I am basically trying to create an animation that occurs before a route change in angular.js. There is a mechanism whereby I can create a deferred and the routing waits until it is either resolved or rejected. The problem is that while it works fine in a timeout callback, it doesn't work in an onComplete callback of TimelineLite. Can anyeone shed any light on why that would be? I can provide some code if you need it.