Mr Pablo

Hmm, if i had a date in the future, say a few months away, how could I show a countdown from today's date, to that future date, counting down the seconds? EDIT - I'm just trying to figure this out, and I have your code snippet, but how would I display this? I am trying: var foo = { bar: 100 }; $('#container').append('<p>'+foo.bar+'</p>'); TweenLite.to(foo, 2, { bar: 0, roundProps: "bar" }); But nothing animates..

I've seen a few posts about doing countdowns in AS, but is there a way to do a countdown e.g. From an integer or even a date, using the GSAP JS library?

Oh wow, how did I not see that! No idea why that was in there :-/

Where is that extra 1 second coming from? I'm guessing that is also the culprit for the delay at the start?

Hmm odd, I definitely changed those! Fixed http://codepen.io/anon/pen/qDcGA EDIT - Rodrigo, could you kindly edit your post to remove the localhost reference? Just is includes a sensitive name

OK, so this is my CodePen, replicating the animation I have made. http://codepen.io/anon/pen/qDcGA The animation lasts 10 seconds, and if you let it play on it's won, you will see the image drops down and there will be some margin on the top and left sides. BUT, if you grab the slider control and scrub to the end of the slider range, the animation is 1 second behind, with the image not fully dropping down into place by the time you reach the end of the slider. Also, the text is set to animate over 5 seconds, with various console logging, you can see that when using the slider, the text ends after 6 seconds! One last thing to add to this. Whilst letting the animation play on it's own is fine, it seems to take about 0.5-1 second for the animations to actually start. Is there a reason for this? EDIT - Fixed link

Hmm, even after following the CodePen and hard coding the max value to 10000 and using ui.value / 1000, my slider is still 1 second behind. due to the sensitivity of the code, could I send you the file for you to look at?

I have a bit of a complex set up, but I am using timelines to build up individual asset animations and then add them all to a master timeline. The animations play really well, but I have just noticed that if I interrupt the timeline with the slider control, the animation will be behind by 1 second. Here is my slider code: $('#scrubber').slider({ min: 0, max: duration, slide: function(event, ui) { masterTimeline.pause(); masterTimeline.seek(ui.value / (duration / 1000)); console.log(masterTimeline.progress()); } }); In this example, "duration" is 10000ms (10 seconds)

Ah, i am using X and Y coords, my bad. I'll try left and top, if not, i'll try the tweaks you mentioned. EDIT looks like I should be using X and Y lol. totally misunderstood! I did try left and top though, and the animation on the Android Device was terrible. It would stutter severely and was no where near what it looked like on my PC (which was fairly smooth to be honest!). I have gone back to X and Y and added in the force3D, rotationZ and Z tweaks. Looks about the same as it was before :/ I'm going to try slowing the scrolling down a bit.

The main device I am using is an Android Tablet, using the WebView (I've written a custom application for doing various thing, the main part being the display of this animation) The tablet is running Android 4.2.2, has a dual-core A9 @ 1.2ghz, Mali-400 GPU and 1gb RAM. Most animations play smoothly, such as fades etc, but there is something about this side scrolling that makes it look juttery :-/ I was inspecting the animation in Chrome and I notice that as the value for the "left" position changed, it was using decimals. Is there a way to force it to tween as an integer? e.g. left would tween from 0 to 10 as 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 and not as 0, 0.1, 0.2 ...1, 1.1, 1.2 ... 10 ??

I tried with force3D set to true but it didn't help.

I have a pretty basic animation set up using TimelineMax. It scrolls some text from right to left at a set speed. For some reason, it seems to "jutter" (jitter? lol) and it's quite noticeable on anything less powerful them my desktop PC. Here is a fiddle: http://jsfiddle.net/fcBGJ/1/ I need this to be buttery smooth! Thanks

Greensock - My reason why are long winded but I'll try to give you a run down I have a platform where people can build animations, using Canvas and FabricJS. I then translate the Canvas/FabricJS objects into an animation controlled by GSAP. Each asset (images and text) is added to a container, properties are set and tween transitions added. The issue arises when we have text aligned to the left or right. Using FabricJS, a new property, called "centeredRotation" allows for a "fake" origin when you rotate the object, yet it still keeps its real origin for placement, "top left" in our case. One of the animation presets I built in is to spin the object 360 degrees, but when text spins with an origin of "top left" in GSAP, I'd actually prefer it to rotate about it's centre (a purely aesthetic thing). The idea of using a wrapper might do the trick if I can figure it out!

Well I am setting the position with X and Y properties, and changing the transformOrigin property does in fact change the way the asset is positioned...

I have, and it seems I haven't been too clear I have a square, 100 x 100. I want to position it (x and y coordinates) as if the origin was set to "top left" (or "0 0"). BUT, I want to tween the rotation of the square as if the origin was "center center" (or "50 50" or "50% 50%") WITHOUT the position being compromised. Basically, in an ideal world, there would be two origins, one for position, one for rotation (even one for scaling) but as far as I can see, there is only the one, and it effects both position and rotation.

I am looking for a way to allow an asset to be rotated about it's centre point, but be positioned as if the transform origin was "top left" (or even "top right" etc) Is this possible?

Aha that seems to do the job! Yes, it is very complex, but it gets the job done!

I tried adding in that initial CSS, but it doesn't work, the problem assets are still playing up. It's odd, as they should have 0 opacity from the beginning.... http://codepen.io/mr_pablo/pen/mabrk

Hmm, it *kind* of works. The assets seems to be tweening correctly, but they initially appear on the screen with opacity 1 and visible. (I changed the time form 0 to 1 on the timeline.to() method)

I have implemented your latest codepen code into my master file. I removed the arrays and the animations seems to play in the correct sequence with the correct timing. I am having a few issues though. One of my assets in the first animation is no longer tweening. It is meant to tween from opacity 0 to 1 over a few seconds. Now it just "blinks" on. Other transitions (rotation, x, y etc) seem fine. Also, the timing's don't seem to match. I had made it so originally an asset had a delay that was from the start of the animation, now it looks like the delay is from the end of the previous asset tween. http://codepen.io/mr_pablo/pen/mabrk EDIT - I changed the codepen a bit, adding in some "0" times on the .add()'s seems to knock the timings back into shape, but as you can see, the one image, which should transition from 0 to 1 opacity, is just, there! Very odd.

Ah awesome! Your 'pen: http://codepen.io/GreenSock/pen/Ecrfb is looking good! Do you have any ideas on how to sort out the whole hidden/visible issue? All assets need to be hidden, then Object 0's assets need to be shown when it plays, then hidden on complete, then the same for Object 1. I got stuck trying to use a .set() and the onStart/onComplete methods. Pretty sure I was setting things in the wrong order etc.

Yes, it gets a tad complex with the nested timelines. I can get it to a point where the timelines are playing in the correct order, but I am having trouble with hiding and showing the assets (one of my previous topics was about this as well, but the solutions discussed didn't in this situation!) I need the assets for all objects to be hidden then made visible when the object time line they belong to is bring played. Using set() gives flaky results (again discussed previously, apparently the operation order changes after the first play?) Using onStart and onComplete functions got me in a total mess but is possibly the way to go? I still think the sequence alignment is broken/not working properly in my case. I don't think I'll be able to do a reduced case until much later today!

I am trying to get multiple timelines to play in sequence. I have created some timelines (TimelineMax) and added them to an array. I then created a "master" timeline (set to paused and repeat -1) ad added the array using: masterTimeline.add(timelineArray, "+=0", "sequence"); And it simply doesn't work. (something similar to this did work in a previous file, where I was using TweenMax, but I have since changed to TimelineMax, which uses TweenMax, right?) If I just add the array, and don't add in the other options, the animations play, but at the same time! (I inspected the DOM and can see the assets tweening simultaneously). Codepen: http://codepen.io/mr_pablo/pen/fqdLs

http://codepen.io/mr_pablo/pen/xvfkK If you see here, the animation should only last 10 seconds, but the 15 seconds tween is causing it to over run. If you change the 15 to say, 9, then the animation does only last 10 seconds. EDIT - whilst this demonstrates my issue. my actual code is a bit more in-depth, with 3 timelines in use , but the solution should be the same I assume)

My animation is made up of various nested timelines and I need to be able to make sure the 2nd level timelines (the master timeline adds the 2nd levels ones to queue them up basically) last only a certain length of time (lets say 20 seconds). I am using the following code to "pad" out my timeline: .set({}, {}, 20); Now, if the tweens inside the animation last fewer then 20 seconds, it seems to work fine, with the animation last 20 seconds and repeating. BUT, if the animation lasts longer then 20 seconds (for example, mis-typed tween durations etc) the animation will last till the tween times (i say tween, i am only using timelinemax) finish. How can I force the second level timelinemax to stop and reset after the 20 seconds? (on a similar note, is there a way to change how the delay times work, I remember reading somewhere that they can be made to all start from 0, or follow on from the last tween? (my current delays are following on form the last tween, and my animation data is old, hence these issues with the fixed timeline length))