Jump to content
GreenSock

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

Image sequence flickering?

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

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)
  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

you just need these lines :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)
  • Like 1
Link to comment
Share on other sites

Thanks guys!

 

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

 

Thanks.

Link to comment
Share on other sites

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

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.

Link to comment
Share on other sites

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

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

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

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

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.

 

 

Link to comment
Share on other sites

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.
×