Animated Text in Adobe Animate fails to work

[jiggy1965]

I've been following your quick Twitter video on animating text, @Carl

But for some reason my file doesn't seem to work. I added the GSAP Library, added the broken down text field to create an array of letters and added below code.

 

let letters= this.my_text.children;
console.log (letters);
let tl = gsap.timeline({repeat:9})
tl.from(letters, {y:100, alpha:0, stagger:0.1, scaleX:0.2, ease:"back"});
tl.to(letters, {y:-50, alpha:0, duration:0.25, stagger:-0.05}, ">0.5");

 

But I then get the browser console error:

GSAP target  not found. https://greensock.com
Tween — gsap.min.js:10:32341

 

When I use let letters= this.my_text, without 'children' it works. The entire clip animates. But when I add 'children', the text and letters just freeze and I get this message that the GSAP target can't be found. Both in Safari and Chrome.

 

What am I doing wrong? Attached the Adobe Animate file

 

animatedtext.fla

[jiggy1965]

Never mind, figured out that I had to add that script 1 frame later than the actual text movie clip on frame 1

[Carl]

I just downloaded your file and it worked perfectly for me. thanks for providing it.

I'm guessing you may have an older version of Animate. There was a problem where scripts on frame 1 could not access movieclip children. You had to wait a frame or wait for some frame_rendered event or something dumb.

 

In Animate 20 it works fine. It was one of my biggest issues with Animate.

[jiggy1965]

That was indeed it (I'm using the 2019 version of Animate). Got it working now. But I am curious though... The stagger runs nicely through all letters from left to right. That's probably the order (left > right) that they are placed once the textfield is broken down to letters. When I would move the letters in that clip around it would still stagger in that same order. Even if I would move letter two to the left of letter one.

 

Was wondering what to do when I would like to have the same result when using a movie clip filled with various shapes instead of letters. And how to set the order in which those shapes should stagger. I would probably have to create some individual movie clips inside the container movie clip and then create an array variable in which to set each array index to a specific shape movie clip? Something like clips[1] = this.clip1 ? And then using the same way (using .children) to tween all individual children of that container clip in the order in which they are used in that array variable?