Jump to content
Search Community

Image sequence flickering?

richfinch test
Moderator Tag

Go to solution Solved by Diaco,

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

Hi,

 

I'm a novice when it come to this stuff but I've recently set up a holding page for a friend of mine and she wanted a video on it.

 

However I found out that a video is no good in iOS devices as it starts off paused, and you have to click to play it.

 

Therefore I started browsing the net to find a solution, which seemed to be to turn the video into an image sequence.

 

Thats when I found this example codepen 

See the Pen aJcGl by jamiejefferson (@jamiejefferson) on CodePen

 

So I used the Javascript and bits of the CSS to create my code . However as you can see it is very glitchy?

 

I've been trying to iron out the flickering but with no luck.

 

Any ideas how to smooth it all out, as I'm really stuck!?

 

Many Thanks in advance for any help!

 

http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/

 

 

See the Pen pgrQZO by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

hmm , I think this's better than .stagger method : 

See the Pen adLBQK by MAW (@MAW) on CodePen

var imgIndex={i:1}, I=0 , img=document.getElementById('myImg');
var imgSrc = 'http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/images/seq/guilty_dolls_';

TweenMax.to(imgIndex,3,{i:97,roundProps:'i',repeat:-1,repeatDelay:1,ease:Linear.easeNone,onUpdate:function(){
    if(I!==imgIndex.i){
        var num = I<9?'0'+imgIndex.i:imgIndex.i;
        /*
        you can avoid above line by rename your image from ( ...01.jpg ) to ( ...1.jpg ) and remove "0" in less than 10 numbers ,
        then use this line to setAttribute : img.setAttribute("src", imgSrc+I+'.jpg');
        */
        img.setAttribute("src", imgSrc+num+'.jpg');
        I=imgIndex.i;
    };
}});
  • Like 1
Link to comment
Share on other sites

I just want to chime in here. Diaco has offered some awesome solutions along the way that made a lot of sense. However, at times I noticed they did not work so well. It was very perplexing and this is no fault of Diaco or GSAP.

 

For some very strange reason there is something in these pens that is causing a very high CPU strain and our best guess is that it has something to do with the images.

 

We removed all the JavaScript and the call to TweenMax and this very simple pen somehow drives my CPU mad.

I'd be curious if other users of Chrome can verify the same results. Open Chrome's task manager and then click on: http://codepen.io/anon/pen/KVXvYP

  • Like 1
Link to comment
Share on other sites

 

hmm , I think this's better than .stagger method : 

See the Pen 9f6b2aecee8293687f70940be560dc54 by MAW (@MAW) on CodePen

var imgIndex={i:1}, I=0 , img=document.getElementById('myImg');
var imgSrc = 'http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/images/seq/guilty_dolls_';

TweenMax.to(imgIndex,3,{i:97,roundProps:'i',repeat:-1,repeatDelay:1,ease:Linear.easeNone,onUpdate:function(){
    if(I!==imgIndex.i){
        var num = I<9?'0'+imgIndex.i:imgIndex.i;
        /*
        you can avoid above line by rename your image from ( ...01.jpg ) to ( ...1.jpg ) and remove "0" in less than 10 numbers ,
        then use this line to setAttribute : img.setAttribute("src", imgSrc+I+'.jpg');
        */
        img.setAttribute("src", imgSrc+num+'.jpg');
        I=imgIndex.i;
    };
}});

 

 

Thanks you everyone for your input, however this is still giving me trouble.

 

Diaco, I've implemented your last bit of code into my codeine see here: 

See the Pen MKOaJO by anon (@anon) on CodePen

 

Tested it in Safari and Chrome and it doesn't seem to flicker.

 

However when I upload everything it won't play? http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls3/

 

Any ideas?

Link to comment
Share on other sites

  • 4 weeks later...

I am seeing the same high CPU usage.. if i open a regular tab outside of codepen the high CPU goes down to zero. As soon as i give codepen tab with this images example the CPU spikes.

 

But i do notice in my profiler and network in dev tools have some images that did not load and were trying to load again and still continuing to load. I had to give the page a couple of minutes to load before attempting to scroll any of the panels in codepen.

 

This might be some type of bug in codepen when using a large amount of image tags that are very large resolution.

 

Tested on Chrome Version 48.0.2564.109 m  on Windows 7 (64-bit) :)

Link to comment
Share on other sites

  • 1 year later...

Hi Devotee,

 

Please post a new topic with a very simple demo illustrating the problem. This topic seems to be focused on a very odd issue related to cpu usage in the original posters demo. Better to keep your issue separate.

 

 

Without seeing some code and how your animation is set up in the html its very difficult to diagnose this efficiently. Thanks.

 

 

 

  • Like 1
Link to comment
Share on other sites

  • Carl locked this topic
Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

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