mikaL

uhtml is a lot like lit-html, but the API is simpler, closer to standard HTML, or JSX. I didn't go with his hooks solution though (he's got at least 3 hooks libraries too, and I just couldn't figure it out)

Another one ... he's got dozens of libraries. A bit hard to figure out, because his docs & examples are not quite as good as GSAP's, - but it seems to work.

I'm using a library, uhtml, that uses template literals, like lit-html. Details here , if you're interested. So data is in plain objects, and then gets rendered thru uhtml. My "components" are functions, with hooks too, so it's kind of like React, but of course much simpler, no virtual DOM etc. GSAP is used to build a root timeline + component-timelines. Root timeline is used to control all animations, so that it can be stepped frame by frame, to be fed into video encoder in backend, that renders the HTML in browser (puppeteer).

That's where it's often used, but it doesn't have to be. ShadowRoot inherits from DocumentFragment --> Node , so it's got append() , appendChild() etc. methods. https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot

No, it's not. All you have to do is const element = document.createElement('div'); element.attachShadow({mode: 'open'});

Well, I think I can live with having that extra step in getting the targets. This is not the first issue with I've had with using shadow DOM when a library uses document.querySelector, or mutation observers, etc. So I may even end up not using shadow DOM at all, though it does have its benefits. As far as I know web components tend to use shadow DOM too. But as I said, it's not a deal breaker for me.

Yes, I think this is exactly what I'm looking for. I could even set it sort of globally beforehand, with something like this gsap.defaults({context: shadowRoot}) , right? And though my use case right now isn't React, that looks useful too (I have yet to dig into animating UI transitions in React...). What I'm trying to achieve here is, hmm, like a plugin system where the animated plugin components live inside a shadow DOM, to encapsulate styles mainly. In the components' rendering methods, I'd like to be able to use GSAP APIs with as little custom trickery as possible. Cleaner and simpler that way, + less documentation for me to write, when I get other people writing those components as well.

I have my animation targets inside a shadowRoot, to prevent e.g. UI styles from leaking into my animated objects. However, in the docs it says: This is a bit of a problem: document.querySelectorAll doesn't return anything from shadow DOM. I can call shadowRoot.querySelectorAll() instead & provide elements directly as it says above, but I'd prefer the simple GSAP API ... so I wonder if there's any other way around this? Maybe an option as a feature in a future version, in e.g. GSAP.config() ?

Yes, well, the disappointment is easy to bear. It'll be simple enough for me to use onUpdate, but I just wanted to check if there was a better way. Thanks for your help!

Hi all, I need to do some calculations after timeline (TimelineMax) duration changes. I take it can change because of number of things, i.e. adding or removing tweens, changing repeat values, etc. etc. There are a number of components in my application that could cause the change, so I'm looking for a method to somehow intercept or detect the change... hopefully there's a callback or something that I've just missed in the docs...:) -Mika

This is kind of old but since I just started with a similar project, thought I'd chip in... In React, just put this below your imports & above your react component declaration: const T = TweenLite; // eslint-disable-line , and then in your component use it as T.to() ... etc. = only 1 eslint-disable line.

Yes, that clarifies it. I just had some older code using TimeLineMax (v. 11 maybe?), and now that I downloaded the new versions I found that what used to be useFrames had changed to usesFrames , totalDuration to totalDuration(value: Number = NaN) , etc. I suppose there's a reason to these changes, but now I need to go through everything to check I'm not using the old versions anywhere where the compiler doesn't catch them.

which one is correct http://api.greensock.com/as/com/greensock/TimelineLite.html#usesFrames() or http://www.greensock.com/as/docs/tween/com/greensock/TimelineLite.html#useFrames it's a bit confusing that after downloading new version old code started producing errors. Is the parameter in the constructor still useFrames ? Thanks.

I tried all that, even removing every possible call (get videoTime etc.) to the videoLoader, but only removing addEventListener(VideoLoader.PLAY_PROGRESS, onPlayProgress); got rid of the errors, even when the handler contained no code. I suspected there was something with my cleanup code since I really don't understand all the dispose nuances, so I changed (_videoDisplay is a ContentDisplay) _videoDisplay.dispose(true, true); to _videoDisplay.dispose(true, false); ... problem solved. Mika

Hi again, Back to this issue after a long time. I still have no clue how I could be calling anything after disposing the video. I do something like video.dispose(true); video = null; ...and then everywhere when I call a method of the video I check if (video) . . . Wouldn't I see something else on the call stack when the erro is thrown too, not just the 2 lines? Mika

Hi, I have a VideoLoader that I use to play videos, so that when changing between them (either because of user action or video completing) , I try to clean up everything before loading the next file. I remove all video playback event listeners, and then call VideoLoader.dispose(true). Then, when the next video plays, I get a lot of these: TypeError: Error #1009: Cannot access a property or method of a null object reference. at com.greensock.loading::VideoLoader/get videoTime() at com.greensock.loading::VideoLoader/_playProgressHandler() So I looked through the gs code & found this: override public function addEventListener(type:String, listener:Function, useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=false):void { if (type == PLAY_PROGRESS) { _dispatchPlayProgress = true; } super.addEventListener(type, listener, useCapture, priority, useWeakReference); } But there was nothing that would set _dispatchPlayProgress to false, so I added this: override public function removeEventListener(type:String, listener:Function, useCapture:Boolean=false):void { if (type == PLAY_PROGRESS) { _dispatchPlayProgress = false; } super.removeEventListener(type, listener, useCapture); } That seemed to solve the problem - but I'm still not sure if that actually was the problem, or was it maybe my clean up code. Another problem I have is that sometimes PLAY_PROGRESS doesn't happen at all, or there are long periods (~10 sec) that it doesn't. The video still plays just as usual. Mika

Thanks, I already found out that a lot of things come from netStream, and most of netStream's functions don't work out without FMS. Mika

Hi, In Flash docs I found a method NetStream.step() http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/NetStream.html#step() ...but it't not there: it's doesn't show up in FlashDevelop code hint, and if I try to use it type casting to Object I get ReferenceError: Error #1069: Property step not found on flash.net.NetStream and there is no default value. Any idea? Mika

Hi, I have a link to an external site that has some mp4 videos I need to play in Flash. If the address was http:// etc. then no problem, but because this is a password-protected ftp site it becomes difficult. I found out that Flash doesn't load anything trough ftp protocol, so I tried a small php proxy script that reads the file. This works well with text files and DataLoader, but when I try it with mp4 & VideoLoader I get "NetStream.Play.FileStructureInvalid" errors. This is not really a video loader problem, but if anyone knows a solution it would be great. Mika

Thanks, I'll try that. Actually that 1/3 thing is not what I'm after, it was just something I tried at first to get the hang of things. What I need to do is something like this: I have a UI control A ("left pane") that may resize, both when the user drags its edge, and when the whole stage gets resized, it could maintain some relative size, such as 1/3 . Then I have controls B, C, D whose left edges should stay 10 pixels to right from A's left edge. B, C, D are stacked vertically so that B's top is at stage top, D's bottom is at stage bottom, and C fills the space between B and D. And it gets more complicated than this (e.g. I also need some items to be evenly spaced, and the controls contain other controls whose positions are relative to the container) but the general idea is that I need to have my UI controls chained together so that moving some edge moves others. I probably haven't quite understood the way that Areas and Pinpoints work: I find it a little awkward to specify top_left and bottom_right to constrain an area, and then attach a DisplayObject to the area. Instead, or additionally, I'd like to use guidelines, that you could attach a DisplayObject's edge to. Maybe I could implement a dynamic guideline system using PinPoints, dynamic or static?

Hi, I'm just getting started with LiquidStage. I just can't figure this out, & didn't find anything in forums or demos: Let's say I want a pane, with some UI controls, on the left side of the screen (=stage). It should always be 40 pixels from top, 60 pixels from bottom, and be 1/3 of the screen width. Minimum size is 100x100 pixels. So I created a LiquidArea: area = new LiquidArea(stage, 0, 40, stage.stageWidth / 3, stage.stageHeight - 60, 0xFF0000, 100, 100, 99999999, 99999999, false, null, true); and 2 pinpoints: topLeft = new PinPoint(0, 40, stage); bottomRight = new DynamicPinPoint(stage, getBottomRight); and a getter function: private function getLeftPaneBR(): Point { return new Point(stage.stageWidth / 3, stage.stageHeight - 60); } and then attach a UIComponent to the area area.pinCorners(topLeft , bottomRight, true, 0, null, true); area.attach(_leftPane, ScaleMode.STRETCH); ...but no matter what I change the strict, reconcile, et. etc. values, when I scale the player window the area gets scaled somehow proportionally: the 60 pixels from bottom doesn't stay 60, and 1/3 becomes about a half when the stage gets larger??? thanks, Mika

Thanks, You probably meant request.data.xml = data.toXMLString(); ? , but it still doesn't work: the server can't handle it and nothing is uploaded. I really have no idea what POST and multipart/form-data etc. actually mean, but could that be the problem? I mean, does this request.contentType = 'multipart/form-data'; work with URLVariables? Of course I can go back to using Flash classes for this, but I'd prefer LoaderMax since the download part works so well.

Hello, I tried this with DataLoader (it works with Flash URLLoader class): public function save(url: string, data: XML): void { var request = new URLRequest(url); request.contentType = 'multipart/form-data'; request.data = data.toXMLString(); // <== if this is commented out, no error request.method = 'POST'; new DataLoader(request, { name: 'saveXML' } ); //... and then .load() etc. ... } But I get this error in DataLoader constructor: TypeError: Error #1009: Cannot access a property or method of a null object reference. at com.greensock.loading.core::LoaderItem/_setRequestURL() at com.greensock.loading.core::LoaderItem() at com.greensock.loading::DataLoader() If I comment out request.data = data.toXMLString(); then it doesn't throw the error. Any idea? Mika