QACollective

Correct - this is why I tried writing that hideInactiveOverlays function after you kindly provided the factory function solution. I figured that there would be flickering if I did this. Yep, basically you're right. Unless I introduce a 5-10 frame buffer for the purposes of solving this problem. Hmm...I'll add that to the possibilities list, down the bottom ? This is a red hot option, although would be a significant re-code server side. It may be worth it in the long run though because I could hide things with more certainty. Thanks, I'll look into that. Wow. Okay, so this is cool. Not only does this validate the way I've been doing things on my end - as a lot of that code resembles my own, but its also provided significant education on what's possible using delayedCall() in respect to the timeline. I'll re-group, re-code and reply when I've got a working solution to let you know how I went. Thank you so much @Dipscom and @GreenSock for your perseverance and sagely advice! ? QA

True! Since you unified several important parts of both yours and Jack's thinking, I'll respond mostly to your quotes, except the following. Crud. I really shouldn't have missed that, but alas I did. Sorry. So while running inside an onComplete function, if I can determine that the current tween doesn't have a successor in the next, say, 5 frames, I could set its opacity to 0. You are both on the right track. When I receive animation instructions for an annotation in a frame of video, I can only know for sure it needs to be there for 0.04 seconds from the position time (also in seconds). For simplicity's sake, I am keeping the JS on the client 'dumb' ... it just copies animation instructions over into GSAP. I can only know when a tween needs to go away when I stop receiving animation instructions for a certain annotation. At the moment I don't do that kind of tracking in the browser. Again, you're both on the right track. The animation instructions are indeed being produced on a completely live feed, which has the constraints that @Dipscom mentions. However, these animation instructions are stored verbatim in a database for later viewing of the live feed with the same annotations. So when a live video is being played back I also plan on being able to support seeking to any point. So I'm trying to code a viewer that will work equally well in both scenarios with the same coding paradigm. I've basically captured all the HTML5 video's events and matched them up to GSAP TimelineMax calls, which seems to work quite well - the events matched up nicely, which doesn't seem like coincidence ... kudos guys Yeah, I think you're right on this count. Sorry for this. I really hate to waste good people's time ? This is mostly correct, except the last two points. The annotation is generated using AI and I think the key you might be missing here is that even though one animation only lasts 0.04 seconds, I'd completely expect there to be multiple consecutive animations of that duration for each target. So even though each animation lasts only 1 frame (0.04 seconds), the multiple consecutive animations give the impression of continuity. But the other major point (which I think you already understand) is because of the live scenario, I don't know the duration or even the x,y coordinates of the target until I receive the next frame. You're right - and I can't apologise enough, sorry. It's also annoying that I can't be completely open with you due to the fact that what I'm doing is both sensitive in nature and expected to be an industry first. Thank you both for your hard work (mostly on my poor explanation of a clearly evolving problem) and perseverance! QA

Wow, thank you for saying that! I do take pride in at least attempting to be articulate. The sentiment is indeed mutual, as I find both the community here and GreenSock as a product very welcoming, well considered and refined. I've always noticed there is both art and wisdom in concision, so on that note I'll hightail on outta here. ?

My apologies to both @Dipscom and @GreenSock. I rarely post to forums because I'm accustomed to finding answers myself before needing to hassle people! I rarely come across a technical problem without internet precedent and at least a pointer to a solution. Clearly, my skills in detailing a problem aren't as honed as my problem solving skills because I've probably been overzealous in my effort to simplify the problem description for this forum. ? Some additional details which I hope will clarify my problem: My application in general terms is the annotation of live video The number of annotations (which is equal to the number of DOM elements) will typically not be high ... say an absolute maximum of 500, but those annotations are being animated and hidden regularly (reused) Animation commands are being received by JS code from the server on a per frame basis Frame rate is calculated on a per video basis, but is typically 25fps, so 1/25 = 0.04 seconds per frame Recap: the code in the browser is currently completely naive on what's contained in the JSON coming from the server, it just receives the JSON and plugs it into the to() function, so far I've avoided having to make the code aware of the visibility and duration of annotation objects Here is a sample of the JSON received for one annotation object on one frame: {id: 11, markup_name: "dangerous_object_reticle", markup_from: "VisualObjectDetector", markup_type: "overlay", markup_text: "{"target": "acd338db-9443-42d7-9fd2-2d5107ddd75e",…h": "78px", "height": "69px"}, "position": 24.96}"} The actual JSON that will be parsed and passed to the to() function is in markup_text: {"target":"acd338db-9443-42d7-9fd2-2d5107ddd75e","duration":0.04,"vars":{"opacity":1,"y":61,"x":197,"width":"78px","height":"69px"},"position":24.96} I'm grateful for the 'take-aways' so far though: Factory functions can be very useful for applying complex but routine animations x / y transforms are more performant than left / top opacity is the most performant for the situation where you will re-use DOM objects So far, as I see it, I've got three options: Factory function as per @Dipscom's earlier post, but with the detail in this post may no longer be feasible. More fully develop out my hideInactiveOverlays solution Make the code that's transferring animation from server to GreenSock track the annotation objects, detect a ~3 frame absence of animation and automatically tween opacity to 0 in 1 frame. Just confirming, there is no 'onTweenStart' and 'onTweenFinish' type events? God, I hope I've not missed them in the documentation! QA

Hi @Dipscom, I'm much enthused by the great advice given so readily on this forum, thank you. That's a nifty solution, but I fear it would create too many tweens - because, despite my demo, each of my animations only lasts 0.04 seconds (1 frame @ 25 fps). The overall timeline may last at least an hour. So I'm reticent to triple the number of tweens simply to achieve this. I have been playing around and managed to get the code below to work. It's crude, but it stops my JS from having to read deeply into the JSON payload coming from the server and track object state, so I'll probably keep it unless I can find something better. I'm very much interested in performance so thanks for the tips on using x and y in stead of left and top, I'll make changes to the server to send those attribute names through in stead. Do you have any other pearls of wisdom on performance, particularly in the most performant way to hide an element from view? As you can see, I'm currently using opacity - but that can easily be changed. I've already set TweenMax.ticker.fps(25) to match the video. setTimeout(hideInactiveOverlays, 10); function hideInactiveOverlays(){ for (var target in markups_animation) if (!TweenMax.isTweening(markups_animation[target]) && markups_animation[target].style.opacity != "0") markups_animation[target].style.opacity = "0"; setTimeout(hideInactiveOverlays, 10); }

Hello, Thanks for a useful response. I can see why a CodePen goes a long way, for I fear I've not been articulate enough, sorry. I've attempted to add one that helps. My goal is simply to not display an element unless it is being animated, when my code doesn't know where animations are expected to start or stop at the time to() is called, because that is simply an absence of animation commands coming from the server. So in essence, I want to set a default for, say, opacity to be 0 unless otherwise animated by GSAP. I'd love for that to be possible! Initially, I set the animation targets to have negative top and left css values. But after that, boxes are left on screen when there is no animation taking place. If this isn't possible as a built-in feature, will the next best idea be to loop through all available tween elements to check TweenMax.isTweening() and then set the corresponding element's display to 'none' or 'inherit' accordingly and run that using setInterval?

Firstly, congratulations on a fantastic library. It works exceptionally well, is easy to use, logical and well documented! That's more than I can say for a lot of other technology I'm using ? I have a server side engine streaming GSAP animation commands to the browser in order to overlay information on a video. Everything seems to be coming together quite well so far. The problem I have is that once an overlay animation is finished, it's remnant target object is left on screen. So my question: is it possible to default animation targets to only be displayed while they're being animated? I'm trying to keep the code in the browser relatively simple: it just funnels server side commands into GSAP and syncs the animation and video play heads. Due to the nature of real-time streaming, I don't know when an animation is going to end exactly, and it may end and then resume many minutes later. I'm trying to avoid having to track state of an animation on the client and hide the overlay, but it seems I may have to do that? Thanks in advance!