Ro1

Great. I tested it already and indeed, the fallback keeps working. I tried removing the backgrounds on the project and my animations performed a lot better, so it is the graphic rendering you've talked about. It's a pity that mobiles are that jerky so soon. Thanks for your help!

Hi Greensock, Thanks for your quick answer, my reply is somewhat late, sorry Quote from that thread: I agree, if you do want to analyze the element's size on every update. And analyzing and converting to a absolute value is no effort before start animating. 1. With Chrome I meant both Chrome on desktop and on Android. The HTC One (and ony Xperia Z1) I tested it on are recent, high-end devices. I assume they are not that slow..(?) 2. I'm animating 5 small elements (60px, 2 times X, Y, scale difference. 3 times only the X is different), 2 opacity's for full screen div's and 1 or some more elements sliding in. 3. Is force3d:true a substitute for adding a e.g. z;0.1 value ? So instead of { x:, y:, z:, scaleX:, scaleY, scaleZ } I can set a force3d:true and use { x:, y: scaleX, scaleY } ? Not setting the scaleZ gives me aan combined animationm, with scaleZ I get a matrix. Is there a difference in performance between a combined "translate3d(x, y, z); scale(x, y)" and a "matrix3d(..,..,..,..,..)" ? 3.1. Using force3d:true, whould that kill the downgrade to animating left, top for not 3d animation supporting browsers? Thanks!

Hi all, Using an EM-value for Y fails. My tween changes for example { x : 1920, y : '-3em', z : 0.1 (for hardware acc.), scaleX : 1.5, scaleY : 1.5, scaleZ : 1.5 } This gives me a matrix3d. Is this a bug? Using EMs for TOP works perfect though.. Also I find the transitions not very smooth on chrome and android (both chrome and normal browser (htc one)). Even now I've made them matrix3d. IE10 and Firefox are fine. I cannot test it on ios right now. Not tested it yet, but are x and y properties always converted to CSS3 transform / matrix ? Them, in combination with Z, I need to use modernizr or "if lt ie10" for hardware accelleration ? Thanks in advance!

Ahh, copy and paste going wrong, totally didn't see it, thanks. With the code in order, my code works, it does also on the site. And I don't need the opacity. I think you still misunderstood. (I DO appreciate your help/effort tho ) I want to, when you click an option: - use the last reverse, so that no matter what animation was before, it will be undone (not writng specific lines for them and; - the new animation follows WHEN the reverse is done. Is it possible with one Timeline variable? like: 1. animation 2. click other option 3. reverse animation 4. empty timeline 5. begin new animation The cleaning the inline styles for detection I can do with onReverseComplete. AS I WROTE THIS DOWN I REALISED: I think just doing var tl = new TimelineMax({ onReverseComplete : function() { tl = new TimelineMax(); } }); whould do the trick for using one variable and make the only last animation reversable. Not tested yet, gonna try it tomorrow or so. Cheers, Rowan

Hi Rodrigo, I added 'clearProps: "all"' to your fork and saved it ( http://codepen.io/anon/pen/IKyvH ). When you play the timeline, the inline styles are deleted. But if you reverse the timeline, the inline styles remain(!) (inspect the element, you'll see). http://codepen.io/Ro1/pen/jqEfx This codepen I can't get to work It has something to do with the function hashClick, because when I comment out the function, alert gets fired, else not. On my site it works like a charm. But as you can see in that code, I now check if there's an active element, if so, animate it out of screen, set css to zero again and hide it. (could do the css -> 0 with clearProps) The clicked button: -checks what position the textbox element has and animate it with tl.from (bottom 0, animate from down, left 0? animate from left, right 0? animate from right) -set display to block (show()) If I just can do an ANIMATE FROM, and when you click another button REVERSE that animation and then start the NEW animation, my code will be nicer, less bulky and I don't have to check for active element. Now you see 1 type of animation. On the actual page there's another type of animation so the code will be sort of doubled. The problem is, if I animate FROM, then on reverse the inline style props don't get deleted and the check for where to start the animatin from doesn't work anymore (if an element is animated, the e.g. prop LEFT remains -(value of width). even with clearProps : "left, bottom, right"!! It seems that it doens't affect the reverse() onReverseComplete : function() { $elm.removeAttr('style'); } should do the trick I guess. About the paused Timeline. The function will be called multiple times when someone reads all textboxes. oldTL and newTL won't work then, unless I keep track which TL is last used and switch to the other one for a new Timeline. As I wrote this down, I realised it's a bit messy to read/understand. I hope you do and give me your best idea about it. As I said. It works. Only I think it could be better/cleaner. Also I'm very open to comments if my approach could be better. Thanks in advance! Cheers, Rowan

Hey there folks, Well done on this library, I love it! There are a few things I can't get to work: 1. I have a few timeline.from's . When I reverse this timeline, the inline styles remain, even when I add the property clearProps: "all" in the timeline.from statement, is there a solution to this? 2. Is it possible for a new timeline to wait till the (old) timeline.reserve() is completed? Thanks!