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