oby1

thank you it did click for me today ! i think i will use stagger() to replace the outer loop that should make things a lot easier and will have much better control

Thank you so much for the solution so i see how it works now , you declare your function in advance and do the loops to get the arguments. when the function is called it lives and dies for each iteration. so even when it works correctly it creates a number of function that start at the same time? it's not the effect i imagined because i wanted to change each letter individually , but i'm happy to see how it looks

well I haven't considered the time difference, maybe because i haven't seen the result yet. but what I am shooting for is being able to go from a-z sequentially. for example if the 'to' message is "z" and the 'from' message is "a" it will cycle up , but cycle down for the opposite. I tried both declaring a time line outside the function and the following code: http://codepen.io/ohavben/pen/epjPKd?editors=001 TweenMax.to(nullObject, 0, { delay: 0.25 * d, onComplete: function(){myCurrentDiv.innerHTML = letterArray[diffValue]}, }); tl.to(nullObject, 0.25, { onComplete: function(){myCurrentDiv.innerHTML = letterArray[diffValue]}}) but it didn't change anything. I like your last suggestion and I will give it a go. it seems like a good thing to know

well it does animate #box1 but only to the last value because it executes after the last iteration which is 0 , so essentially animating from 0 to 0. I'm not excatly sure what is the difference between tl.to and tweenLite.to in this context that will allow #box2 to animate for every iteration. I'm guessing that scope for tl. is somehow different because it's meant to hold many functions? I noticed that I changed your code like so var pos = [100, 50, 150, 0]; for (var i = 0; i < pos.length; i++) { var tl = new TimelineLite(); TweenLite.to("#box1", 0.5, { x: pos[i] }); tl.to("#box2", 0.5, { x: pos[i] }); } it changed the animation of #box2 entirely

i can't say where I read about it exactly, just been googling. but i tried the following code which produced the same results: for ( var d = 0 ; d < textDifference; d++){ (function(newd){ switch(textDirection) { case '--': diffValue--; if (diffValue < 0 ) {diffValue = 41} // lettarArray length is 41 break; case '++': diffValue++; if (diffValue > 41 ) {diffValue = 0} break; } myCurrentDiv = document.getElementById('textdiv'+v); // toggle the next line to see the end result of the effect setTimeout(function(){ myCurrentDiv.innerHTML = letterArray[diffValue]; }, 250); // myCurrentDiv.innerHTML = letterArray[diffValue]; })(d); } are you saying that I could use a timeline to simulate a loop? i have two loops, the outer one iterated through objects and the inner one iterates through values for the current object, so even if I replace the inner loop with a time line, i may still be facing the same problem.

whoa !! greensock has a pulg in for that? that's really cool and i will definitly check it out. however i would still like to solve this problem sans plugin, mainly because I am new to javascript and programming in general and i feel like i am missing something. I read about closure and loops and i understand that i should wrap the animation inside an anonymus function inside the loop, but i am not sure how to go about it. Thank you for the codepen example!

Hello there I wrote a little function that is supposed to animate the transition of text blocks from one value to another. in a nut shell, it is supposed to change the innerHTML of a an element from one letter to another. However if the current value is 'a' and the desired value is 'e', than the function will cycle through 'b','c','d' to finally stop at 'e'. the logic seems to work fine and it indeed cycles through the letters correctly to get the proper end message to display. where i am having trouble is animating the transition. Since the actuall animation function is inside a loop, it only animate the last transition. you can see what happens in the attached code pen if you remove the // from line 116 and 117 . how would i animate every stage of the transition? thank you!

Actually changed it to a time line for better control and continouse animation. var elements = document.getElementsByClassName('letter'), tl = new TimelineMax({repeat:-1, repeatDelay:2}); tl.add( TweenMax.set(elements, {opacity:0})); tl.add( TweenMax.staggerTo(elements, 0.25, { opacity: 1}, 0.25)); tl.add( TweenMax.to(elements, 3, {opacity:0})); elements.animation = tl;

oh silly me, i forgot to designate a delay to the stagger function... so TweenMax.staggerTo($('.letter'), 0.5, { opacity:1},0.5 ); adding the 0.5 delay fixed it

Hello, so I am trying to animate letters individualy. for this purpose I'm taking text out of a jason object, breaks it into individual letters, and set each individual letter in its own <div> . the ideas is to be able to animate each letter individualy using stagger. However, as you can see TweenMax.staggerTo(elements, 5.5, { opacity:1}); changes the opacity of all the elements at the same time. Any idea why stagger is not working as I think it should? <div id = 'test'></div> #test { height: 500px; width: 500px; position:absolute; } .textlineholder { width: 100%; display:inline-block; position: relative; } .letter { display:inline; position: relative; opacity: 0; } $( document ).ready(function() { var test = document.getElementById('test'); var myArray = { "text1": [ { "txt":"Hello, hello, hello..", "x": "0", "y": "50", }, { "txt":"is there anybody in there?", "x": "0", "y": "100", }, { "txt":"just nod if you can hear me", "x": "0", "y": "150", }, ] } ; for ( var i=0 ; i < myArray.text1.length ; i++) { var linecontainer = document.createElement('div'), letters = myArray.text1[i].txt.split(""); linecontainer.id = 'line'+i test.appendChild(linecontainer); linecontainer.className = 'textlineholder'; for ( var k=0 ; k < letters.length ; k++){ textdiv = document.createElement('div'); textdiv.id = 'textdiv'+i+k; linecontainer.appendChild(textdiv); textdiv.innerHTML = letters[k]; textdiv.className = 'letter'; } } TweenMax.staggerTo($('.letter'), 5.5, { opacity:1}); });