Stephen

Hello! I'm using Timeline to overlay DOM elements on an HTML5 video (to fill in user's faces on top of the pictures in the video). This is working very well, but I was hoping to make it even better. Right now, JS seems to run a little slow compared to the HTML5 vid and the Timeline falls behind. Using the video's 'timeupdate' event, I am able to keep it synced with this code: timeline.seek(videoElem.currentTime); The timeupdate event fires about 5 times per second for me in Chrome, and in general Timeline stays well synced with the video. Sometimes, however, this can cause a 'bobble' effect - Timeline is slower than the vid, jumps forward with the .seek, is slower than the vid, jumps forward, etc. This only happens sometimes, I assume when the animation is taking longer for the browser to process. One thought is that a separate JS function, running on a 0.0416 second loop (24 fps) could be constantly .seeking the timeline, but I'm wondering if this would be extremely expensive and/or ignorant of a better way. The elements would still 'bobble' with this, but the bobbles would be micro compared to 5 times per second. Overall I'm happy with it now, but I'm always looking to improve. Does anyone have any ideas about how I could keep Timeline synched with an HTML5 video in a better way? Thank you for your thoughts.

Perfect - thank you very much Carl. I have watched the vid a while back but will rewatch to refresh my memory and keep the simple questions to a minimum. =)

Just found and experimenting with .insert function - looks promising!

Hello - As always, thanks for the amazing tool. I'm using TimelineLite to 'synch' some JS animations to an HTML5 video. I can keep the two together by using the video's time change event to timeline.seek the identical time. This works great! Unfortunately, it's getting pretty complicated building all of my animations on a system where each subsequent tween is based on the previous one tween. For instance, I was just sent a new version of my video and needed to move a tween in the beginning 'back' by 1.25s. Then I had to go add 1.25 seconds to the following tween's delay to push it forward again. Normally this is a great feature for animation, but not in my use case. Is there anyway to use TimelineLite by setting hard time codes for tweens to start? Like, Timeline.to(element, animationTime, { animationOptions }, startAt: 50) and this tween would always start at 50s into the timeline regardless of other tweens? I understand this isn't the normal application for Timeline but I figured it can't hurt to ask. Thank you so much for any help!

Hi Carl, Super helpful, thank you very much! The 0 duration tween bit makes sense. I'm on the newest version but was basing my code off an older tutorial. I switched to, and love the new syntax.

Hi, Sorry to resurrect an older post but my question pertains to TweenLite's playing right away inside TimelineLite's. It seems that if I put a TweenLite with a 0 duration inside a TimelineLite, it will play upon page load (even if the TimelineLite is paused). I have to add immediateRender: false to my 0 duration Tweens. Is this desired? Here is my sample code: var timeline = new TimelineLite(); timeline.append(TweenLite.to($face, 0.5, { left: 285, top: 160 }), 0.5); timeline.append(TweenLite.to($face, 0.4, { left: 240, top: 170 }), 0.4); timeline.append(TweenLite.to($face, 0, { left: 169, top: 87 })); // happens upon page load timeline.pause(); There are not really "br's" in my javascript - those are being added by the forum editor for some reason.