Mr Pablo

Recently, we have moved our bespoke animations away from using DOM elements to using Canvas, due to memory issues when running on low to medium powered devices such as Chinese Android "sticks" and Google ChromeBit. Everything went smoothly, until we introduced videos. We have found a bug where a video plays on the first load of the page, but then after subsequent refreshes, the video will not play. Instead it just shows the very first frame. What is peculiar is that the video is loaded into its DOM element (used by Canvas to grab the video) and the frame even shows on the Canvas itself, but viewing the network logs in Chrome Inspector, the video is not shown in the logs as being loaded. Image assets are shown, as are the JS files, but no video, despite it being on the page. After some very brief digging, there does seem to be some kind of timing issue in the code. Assets are added to "sub" timelines which in turn are added to a main timeline. It appears that the sub timelines are firing their onStart callback before the code has chance the load the videos into the DOM element (looking at the code with my colleague, the order looks correct) Is there any reason why a (sub) timeline would start prematurely, before the main timeline is told to play?

Crap, the jsfiddle didn't save, I have fixed it. http://jsfiddle.net/z6urqkpe/4/ towards the bottom, in the changeFeedContent function, I get undefined for timeline.vars.startAt and css

Works fine http://codepen.io/anon/pen/GoKbXL

Bump

Please see my edit above, I cannot access vars.css or vars.startAt either, for my timeline.

What if I'm using fromTo? That uses two sets of values and I only need to change the second, "to", value. http://jsfiddle.net/z6urqkpe/ You can see here, I am trying to get timeline.vars.css, but it returns undefined.

I have a basic timeline where I am setting the X parameter based on the width of a DIV. After the timeline completes, I am changing the DIV content, and the width changes. How would I go about changing what the X parameter is, now that I have changed what it's initial value was. Pseudo-code example: var width; width = $(div).width(); timeline = timeline.fromTo( ($(div), time, { x: 0 }, { x: width } ); function ontimelinecomplete { $(div).content(new content), width = $(div).newWidth() } This is what I have currently, but the timeline still uses the original width.

Jonathan, if I use the transform style you mentioned, and the transforms are kept 2D, does that mean hardware acceleration is not used any more?

Well I was hoping someone may have encountered something similar sounding and have a potential fix. Here is a codepen, but you'll likely see it runs fine in your browser of choice. There is no way I can show a live example really, as again, the issue is on a specific hardware solution.

As mentioned, the big issue here is that I could give you a CodePen, but the issue is only visible when running it on a webOS TV (Currently a specialised signage screen). Either way, if I have a "master" DIV that contains my animated assets, if I give them a Z-Index, this is negated, as you stated above, transforms on a child element give them a new stacking context. So how do I go about fixing the stacking context? I want my assets in a particular order (typically, the first child is the bottom most asset) but if this stacking context is simply going to say "sod you, i'll put assets on whatever layer I want" how can this be solved?

I have come across this stack ordering issue when playing my GSAP based animations on a webOS TV (runs HTML5 apps using a webkit based browser) My animations are made from various assets (images and text) and they all have simple A to B transitions. Some assets might not move e.g. a background image, so despite having two transitions, the values will be the same EXCEPT they might have a tween duration (this is due to how the animations are created procedurally) Now, if I have an image, and it doesn't move, and I have other animated assets, the "non-moving" image will shift its stacking order. Stacking order is explained here: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/, but I can't wrap my head around it to be honest. It seems the combination of positioning assets absolutely (so they can animate properly) and having a tween duration for an asset that doesn't actually transition, causes it to "pop" in front of the other assets on each tween. I can fix it by removing the tween duration for any asset that doesn't move, but I have a lot of pre-existing animations I need to fix. I'm hoping there might be something in GSAP or CSS that can be applied to fix this. Unfortunately, this is only apparent on webOS so far, and I doubt anyone else here has a webOS signage screen to test this on :/

Yea, I know its not the idea test bed, but it's what I have to work with. Despite this, what could cause the image to remain pixelated (whilst scaling up) despite setting force3D to true?

Problem with that is it is on a certain hardware configuration. On my Oneplus One phone, its OK, but on the Android "TV Box" I am using to test on, I get these issues.

Aha, thanks for that! Well, I tried setting "force3D" to false, and.... it hasn't helped my case sadly. When set to false, an image (say 1000px square) that is scaled down (using CSS) then scales up over time, will still appear pixelated, AND stay pixelated when the tween ends, I then tried setting force3D to true, same problem. The image that scales up, appears and stays pixelated. Only with force3D: auto, does the image "snap" into focus after the tween.

Using GSAP 1.17.0, I am experiencing an issue where images that appear to "zoom in/out" (by changing their scale values), appear pixelated as they tween, then "snap" into focus when they stop. Currently, this is happening on Android 4.x, when the HTML file is loaded into a WebView. For the GSAP tweening, I am using Force3D: true. Has anyone seen this happen before and have any possible solution? Sadly, it is pointless making a Codepen, as it is platform specific (to Android).