HTML Problem update function (fadein fadeout) with greensock

#1
Hi all

I am strugling a bit with this code in a HTML template

Code: Select all

        function update(str){
            x = JSON.parse(str);
            Object.keys(x).forEach(function(key) {
                    try{  
                        if (document.getElementById(key).innerHTML !== x[key]){ 
                                daID= document.getElementById(key);
                                var tl = new TimelineMax();
                                tl.to(daID, 0.5, {opacity:0}).add( function(){ daID.innerHTML= x[key] }).to(daID, 0.5, {opacity:1} )   ;
                                tl.play  
                        }     
                    }
                    catch(err){
                        console.log(err);
                    }
            });
        };
if i do

Code: Select all

update('{"f0":"a","f1":"b","f2":"c"}')
the first time it will only update "f2"
if i update again "f1" will change and updating again makes "f0" change.

goal is to have a
fadeout all changed fields => change all changed fields => fadein all changed fields
effect when updating

i know the coase (the for loop is going to fast ) but i have no clue how to fix it ;)

Re: HTML Problem update function (fadein fadeout) with greensock

#4
That will not work inside a loop. Instead use the loop to fill the new values into temporary variables, then fade out the texts, set the new values from the variables and fade up again. Use a function to do the setting and fading up and call that function with greensocks delayedCall to make it run after the fadeout.
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests