Mr Pablo

This is very close to what I need, but when I try with my $.each() loops, I am not getting consistent visible/hidden states. http://codepen.io/mr_pablo/pen/xvfkK shows my current working

Aha, this make sense! Question - If I use something like "timeline.set(assets, { visibility: "hidden" });" how do i then make the assets visible? http://codepen.io/mr_pablo/pen/xvfkK shows my current working code (minus the visibility stuff haha)

Ah yes, that css(0 method was in there by mistake, please take a look at the pen linked in my edit. It doesn't use autoAlpha but shows my problem.

That seems to work! I have followed the documentation, but it seems to lack little tidbits like this! Now the issue is I can't get the assets to hide (autoalpha: 0) when using onComplete() on my main timeline, because I guess it is set to loop forever (which i want) I tried onRepeat() but it was glitching and assets stayed hidden... EDIT - http://codepen.io/mr_pablo/pen/xvfkK this is my 'pen. Implemented you change, but as you can see, when using a loop (which i need to be able to use, for dynamic content) the assets stay hidden after the first play through.

http://codepen.io/mr_pablo/pen/BAliD Can anyone explain to me why the image in this 'pen animates OK, then stays hidden? The onStart() function is telling it to be visible, but after one play, it stops working, but the function is being fired!

I started to strip out stuff in code pen and noticed that the erroneous assets are mainly ones that tween their opacity from 0 to 1 and then back to 0. That's 3 states. Opacity 0 is set using .set() and the transition to opacity 1 then 0 is done with 2 .to() methods. On the initial play, the set method seems to work fine, making the assets "invisible". And then to 2 tweena to change the opacity again work fine. However it looks like the set method is not being called again correctly. It only seems to affect assets with 3 or more tweens. I am going to look over the tween and timeline logic when i get into the office today but isn't it odd that just because I'm tweening the asset back to 0 opacity, it fails to be reset on loop? I'm fairly sure my tween and timeline logic is correct so its got my scratching my head loads! EDIT - Made a reduced test case in codepen http://codepen.io/anon/pen/tgfcj As you can see, the tweens start off ok, but when the timeline ends and should repeat, it breaks, without errors. If you remove the second .to() method, it will repeat non stop, like I expect it to.

Doh, here you go! https://dl.dropboxusercontent.com/u/3392109/index.htm

Ah, sorry about that, I totally forgot about some of the script files. I have attached an updated HTML file that should work for you!

I have a set of tweens (created using a .set() and several .to() methods) that is then added to a Timeline. The animation plays, but on the 2nd play (Timeline set to repeat indefinitely) some of the assets are staying on screen, despite the .set() command settings their initial opacity as zero. Do I need to tell the tweens to reset, or should the timeline be doing it automatically? It seems to work flawlessly on most animations I have made, but this one, which has the most tweens yet (~10 assets with ~20 tweens in total) seems to be going crazy. One assets which animates perfectly first time, stays still in its final position for every subsequent play through. Zip file here

Console is reporting the value as a string EDIT -OK, super weird, I think it's Chrome spazzing out haha! Gonna restart Chrome and check

I am trying to set the rotation on an image to an initial value of -180 (this also happens with 180). I am setting it using the following code tn = TweenMax.set( $('#asset'), { rotation: data.angle } ); (other values are also set) When I play my animation, the image is the right way up! If I change the value to -179, or 179, the image is correctly upside-down (ignoring the 1 degree difference) I have tried with the latest version of GSAP (1.11.1). Any idea as to why this is happening? NB I tried using just "data.angle" and also "parseInt(data.angle)" but it made no difference. I also tried add " + 'deg' " to the end, no difference.

Yea I was under the impression GSAP was only for CSS3 stuff. guess the documents don't make it super clear what it can do (there are no examples of it interacting with video) Just had a go, and got video elements working nicely with my CSS3 animations. Just hope it performs well enough on my devices,

Ah, your second example is pretty much the start of what I am after. (although I cannot see any actual video, just a black square?) The reason I saw a potential problem, is because in the past, I worked with video added to a Canvas, with other assets layered on top etc, which worked fine. But now that I am using GSAP (CSS3 based, not Canvas) I was unsure how to approach this 100%. Jonathan - no example, I've not seen it done, hence me asking if it's doable. By mixing the two, I mean, play a full CSS3 animation (done via GSAP) and after it finished, play a HTML5 video, and after the video ends, play another GSAP animation. The video tag doesn't need to animate in any real sense (maybe just a fade in/out?) And I already have my animations. See Jamies post for an example of what I am after. Now I just need to see if I can can apply the example to my project.

rhernando - yea, CreateJS (a canvas library) has callbacks, I'm going to try use that. jonathan - i am not using hosted video. The video files will be stored locally on the device. jamie - if you read my post(s) you'd see that i have both GSAP CSS3 animations (that use DOM elements) and I need to throw HTML5 video in between them. Yes they are separate, hence me asking how to implement this. It's not a case of trying to play the video, that is easy. Its that fact I need to try and mix HTML5 video into CSS3 animations (at least, have it play in between animations, not necessarily part of the actual animation)

Ah sorry if I'm not too clear in my explanation. Currently, I am using GSAP Library (TweenMax, TimelineMax etc) which is all based on CSS3 and uses the DOM to display objects (text and images). I need to somehow mix in the HTML5 <video> element and have it work as if it was a CSS3 animation. e.g. CSS3 animation -> Video -> CSS3 Animation. The problem I can see straight away is that I don't think GSAP caters for Video, i.e callbacks, starting and stopping etc.

Due to various issues, my animation platofmr moved away from Canvas and CreateJS to GSAP and CSS3. We are really happy with the results of GSAP and animations play smoothly on various devices. The issue now is how to re-integrate HTML5 video with GSAP, Has anyone approached this at all? Mixing in GSAP CSS3 Tweens with HTML5 Video? My initial thoughts where to try and combine CreateJS and GSAP (seeing as they both have callback functions) but until I do some tests, I just want to get some ideas on how the two could possibly be mixed together? Thanks, Paul

Yea, I am aware of the differences etc But the crossover is fairly simple (apart form this issue!) as I am using a JSON object that hold coordinates etc which can easily be translated across the platforms. I think I found out the cause of the problem: I believe it is due to the CSS3 property "transform-origin" using local coordinates, respective of the element in question. I tried, with "center center" origin, using the following for the x and y coords: x = left - (width / 2) Where "left" is the Canvas X coord, in px, and width is the width of the object. Left is 640 and width is 1280. It's not super ideal, because there could be issues down the line, but this seems to fix the issue and my assets are placed correctly.

I have created an animation (using Fabric JS as a building platform) and I am now translating the JSON object to GSAP TweenMax. In Fabric Js, the objects all use a "center center" registration point, and I have also set the transformOrigin in GSAP to "center center". EG in Fabric, I have a 1280x720 canvas. A 1280x720 image is loaded to the canvas, having the final coords of 640 x 360 (the middle of the canvas) Porting this across to GSAP however, with the exact same values, moves the image to show its top left corner at those coordinates. I have a master <div> of 1280x720 and the image is being held in a child <div>, set to 1280x720 (the image size) with "position: absolute" and "transformOrigin: center center". X and Y are set to the coords fetched form the Fabric Canvas, 640x360. -webkit-transform-origin: 50% 50% 0px; visibility: visible; width: 1280px; opacity: 1; position: absolute; height: 720px; background-image:url(http://localhost:81/uploads/adverts/1/1/qmXmYRatWn.png); -webkit-transform: matrix(1, 0, 0, 1, 640, 360); Any ideas what's going on? EDIT - just tried the various combinations of transformOrigin and none of them make any difference to the position of my image.

The update alone seemed to help I think! it's looking much smoother now with an increased duration

Yea, I am using x and y co-ords. Its not a massive issue, as most tweens will be fairly quick

If I tween an image for ~1 second, it looks pretty smooth, but as soon as I tween an image to ~10 seconds, the motion appears jerky and stutters noticeably, Now, the image in question is quite large, but potentially usable in my project, so ideally I need the tweens ot run smooth for this image. Is there anything I can do to smooth out the longer, stuttering tweens?

$(document).ready(function(){ $('div').click(function(){ TweenMax.staggerTo("div", 1, {left:"632px", onComplete:goBack}, 0.5); }); function goBack(){ TweenMax.staggerTo("div", 1, {left:"0px"}, 0.5); }; });

I am looping through a load of data to build up several assets (images and text). They are all added to tweens and then timelines, and are currently all visible on the page. I need to make sure that they are not visible until their respective timeline actually plays. I tried using immediateRender:false but that didn't seem to do anything. I cannot rely on the assets having their opacity set to 0, as it may be the case the animation doesnt require the asset to behave that way. So, I need a way to make sure my assets are "hidden" after they are created and added to tweens, then timelines.

I am positioning an image via some Tweens, and have set the x & y properties, as well as scaleX and scaleY. Doing so, the image is assigned a transform matrix in CSS, but I don't think it is behaving as it should. E.g. I have a 200x200 square "canvas/stage", I place a 200x200 colured square, positioned 0,0 and scaled by 0.5,0.5. This means I should see a 100x100 square, in the top left corner. BUT what I get is a 100x100 square, in the centre of the canvas/stage area. So it looks like the scaling is working after the positioning, but I need the scaling to happen first, to keep the images transform point at the top left. Is there a way to make sure this is the case?

Yea, there has been some awesome insight on how to do things with GSAP. As you can tell, this project is a bit crazy! I think I have stumbled onto another issue though. So I have 2 animations, with 2 images each. In my animation data, the pint glass has a wait/delay duration of 0, as does the background. However, the glass is only animating after the background has finished animating. the timeline for each animation doesn't have an align override, so it should be using "normal" which honours delays, of which are all 0. Any idea why my images are tweening at the same time? EDIT - typicaly, I think I figured it out not long after posting I was adding the tweens one after the other to the timeline, with seperate .add() calls, so I assume that was making them play in order. I made a new array, added the tweens to the array, then created the objectTimeline after the loop, and used the "tweens" property. Seems to work now with the delays in place. Although I get an odd behaviour when I have the animation paused initially, just the pint glass animates, nothing else (nothing should animate at all!) Weird!?