HTML Problem update function (fadein fadeout) with greensock

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) {
                        if (document.getElementById(key).innerHTML !== x[key]){ 
                                daID= document.getElementById(key);
                                var tl = new TimelineMax();
                      , 0.5, {opacity:0}).add( function(){ daID.innerHTML= x[key] }).to(daID, 0.5, {opacity:1} )   ;
if i do

Code: Select all

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

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
Problems? Guide to posting Bug reports & Feature requests