Hi All. Thank You for all Your responses.
@ZachSaucier @PointC
Unfortunately i cant provide a proper codepen, due to all this code being in animate cc. However i did record a small demo gif, demonstrating more or less, what im trying to achieve.
I do believe the stagger and steppedEase is the key. I will try to explain this demo.
General purpose of this script is to automate an animation like in the gif.
Im putting all the letters into an array using a for() loop, so from this point i can conveniently use a single like with gsap:
TweenMax.staggerFrom(textArray, .5, {y:"+=10", alpha:0, ease:SteppedEase.config(16), 1);
The next step would be to fire the arrow tween animation, at the .x coordinate of a corresponding letter. (i all ready got all the .x positions of each letter stored in a separate Array thanks to the initial for loop).
So, in my mind, the tween, for the Arrow, would need to look more or less like that:
.set(arrow,{x:positionXArray[currentLetter]})
.from(arrow,.5,{y:"-="+30,alpha:0, ease: Power2.easeOut}, 1 ,
onComplete:function() {
// tween for arrow disapearing goes here
}
});
currentLetter++
However i would need to know, when to fire the function above. It should fire when a letter appears and only a total of letter numbers times.
The onUpdate callback, tigers much more times than a numbers of letters (even with a SteppedEase), making this approach invalid.
@GreenSock
This function looks very promising. But when i tested it, the function myCallback() didn't trigger at all, and console was not showing any "changed!" string.
function myCallback() {
console.log("changed!");
}
Best regards.