Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
vlady_v

Animate a large sequence of jpg's on scroll like video in Firefox

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

Hello everyone,
 

I'm new to JavaScript and GSAP and at forums at all, so excuse me if something is incorrect, but what I've saw until now GSAP is a great tool for animations.

 

I have a video(duration of 30sec) sequence that has been exported as 900 jpg's. My target is to make animation like the one in http://www.sony.com/be-moved/ . I load all images in an array and then execute the animation on scroll, which changes the src of an img tag like the example from scrollMagic http://scrollmagic.io/examples/expert/image_sequence.html. It's working very smooth on Chrome, IE, Safari, Opera (Windows 8.1), but on Firefox there's a blinking effect. When I scroll and change the src img tag is blinking and loosing video effect. In the codepen example it can be seen only for the first time when you scroll and then it's ok, i guess because of cashed images, but in my project they are 900 and it do it all the time. I'm looking for solution over two weeks and from what I've read 99% it's a Firefox performance bug or something. But anyway I wanted to ask the experts if there is any workaround or there's something wrong in my code. Firefox version is 38.0.5.

 

Thanks in advance,

Vlady

See the Pen aOyBBM by vlady_v (@vlady_v) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

It looks like the Sony site is rendering the video to <canvas> (not showing individual images). Perhaps they use the technique discussed here: http://html5doctor.com/video-canvas-magic/ I really have no idea. I just know it isn't <video> and they aren't using separate images.

 

Instead of toggling the src of an image it might be better to just have them all in the DOM and toggle their visibility as Jamie Jefferson does in the first example here:

http://codepen.io/jamiejefferson/pen/aJcGl?editors=001

 

I don't know the performance implications of doing that with 900 large images but its worth a try.

 

Unfortunately, I don't know how to fix the issue you are seeing in FireFox when changing the src. It seems to me that FF just can't keep up.

  • Like 1
Link to comment
Share on other sites

Hi Carl,

 

Thank you for your replay.

 

You are right about the Sony site, it was just an example to show you what I am trying to achive. I've already tryed to have images in the DOM but the browsers can't handle and freeze when i have position fixed of the container and position absolute of the images. I think I'm gonna try to load images for example in 9 different divs and separate the animations for them and toggle visibility as your suggestion.

 

Thank you again.

  • Like 1
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.
×