Search code examples
javascriptanimationgsap

Javascript TweenMax missing frames

i have some troubles with the TweenMax plugin for showing an animated png sequence.

Here is my code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script >var imgIndex={i:1}, I=0 , img=document.getElementById('myImg');
var imgSrc = "{{ asset('img/animation/v5/anim/Comp 2_00') }}";

TweenMax.to(imgIndex,5,{i:299,roundProps:'i',repeat:-1,repeatDelay:1,ease:Linear.easeNone,onUpdate:function(){
    var num = '00';
    if(I!==imgIndex.i){
        if(I<9) num = '00'+imgIndex.i;
        else if(I<99) num = '0'+imgIndex.i
        else num = imgIndex.i
        img.setAttribute("src", imgSrc+num+'.png');
        I=imgIndex.i;
        console.log(imgSrc+num+'.png');
    };
}});


//# sourceURL=pen.js
</script>

The first issue is that from time to time some of the frames get wrong names, so they are not loaded correct. As you can see i have made a debug test with console.log() to see which images are loading:

http://g8pool/img/animation/v5/anim/Comp 2_002.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00003.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00006.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00007.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00008.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00009.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00010.png

The 2nd frame has a wrong name, so it is not loaded, but here is another example

http://g8pool/img/animation/v5/anim/Comp 2_003.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00005.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_00007.png pen.js:840:3
http://g8pool/img/animation/v5/anim/Comp 2_000010.png

Here the 3rd and the 10th frame have wrong names, but the 10th frame in my first example was correct. Why is this happening ?

The second problem is that the console.log() does not output every single frame from 0 to 299. Does that mean that the TweenMax png sequence will flicker ?

Thanks in advice !

Solution

  • The problem was from the imgIndex is an array and is not holding the same image number as I.

    here is the working code:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script >var imgIndex={i:1}, I=0 , img=document.getElementById('myImg');
var imgSrc = "{{ asset('img/animation/v5/anim/Comp 2_00') }}";

TweenMax.to(imgIndex,12,{i:299,roundProps:'i',repeat:-1,repeatDelay:0,ease:Linear.easeNone,onUpdate:function(){
    var num = '00';
    if(I!==imgIndex.i){
        if(I<10) num = '00'+I;
        else if(I<100 && I>9) num = '0'+I
        else num = I
        img.setAttribute("src", imgSrc+num+'.png');
        I=imgIndex.i;
    };
}});

//# sourceURL=pen.js
</script>