Jump to content
Search Community

GSAP, Canvas and video woes

Mr Pablo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...