Image sequence flickering?

richfinch · January 14, 2016

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

Diaco · January 14, 2016

Hi richfinch

pls try this :

var imgs = document.querySelectorAll('.animatedimage img')

var tl=new TimelineMax({repeat:-1,repeatDelay:1})
    .staggerFrom(imgs,0,{opacity:0},0.04)

richfinch · January 14, 2016

Hi Diaco!

Many Thanks for your reply!

Should this just replace everything thats in my javascript file? or does it need to be added?

Thanks!

Diaco · January 14, 2016

you just need these lines

richfinch · January 14, 2016

Many Thanks for that.

However I've updated my Javascript column on my codepen

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

but all it does now is play the last frame?

Many Thanks.

richfinch · January 15, 2016

Hi,

Andy ideas how to fix it?

How it's playing at the minute is fine, however I want to get rid/find out whats causing that flashing/flickering at the start?

See the working link as to what I mean. http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/

Many Thanks.

Carl · January 15, 2016

Can you replicate the flicker on CodePen? Not sure I'm seeing it on the live site. I've had no problems with the original demo that you forked: http://codepen.io/jamiejefferson/pen/aJcGl

Diaco · January 15, 2016

hmmm, i can't understand , what's your problem with this :

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

var imgs = document.querySelectorAll('.animatedimage img')

var tl=new TimelineMax({repeat:-1,repeatDelay:1})
.staggerFrom(imgs,0,{opacity:0},0.04)

richfinch · January 15, 2016

Thanks guys!

Disco your code pen seems to work great. I'll implement it into mine and see what happens.

Thanks.

Diaco · January 15, 2016

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;
    };
}});

Carl · January 16, 2016

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

OSUblake · January 16, 2016

Very weird!!! Mine goes really crazy without any JS. I think it's CodePen's editor, but I don't want to fork it to test that out because it might lockup my profile. I've done that several times, and it's very hard to fix because it locks the UI.

PointC · January 16, 2016

Yep - I see the same thing in Chrome on 3 different machines - extremely high CPU usage. That is pretty strange.

richfinch · January 18, 2016

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?

Diaco · January 18, 2016

hmm ,pls try to place sequence js script tag at the end/bottom of <body> tag or use something like jquery $(document).ready()

Carl · January 18, 2016

and I'm seeing lots of errors with the images.

http://prntscr.com/9robmb

make sure the urls are correct.

Jonathan · February 15, 2016

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)

Devotee007 · June 13, 2017

How do I do this if I have transparent PNG:s? I have to show and hide the PNG to get it to work. Now all stack on top of each other.

Carl · June 13, 2017

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.

Image sequence flickering?

Warning: Please note

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Recently Browsing 0 members