TimelineMax + Animate CC Timeline - Controlling Mixed Animation

[flysi3000 54 Likes (Contributor)]

Okay, so I have myself a hairy little situation here. I have a banner, built in Animate CC. All the animation is mostly contained in a TimelineMax, except for a couple of bits that were just easier to do as nested movieclips. I'm controlling those sub animations with "gotoAndPlay", from functions in the main animation tl.

 

All that works great - except we have a pause/play/replay function in the banner that controls the main timeline, but not the sub clips. What's the cleanest way to get the sub animations to pause/play along with the main tl?

 

Thanks!

[davi 119 Likes (Specialist)]

Sounds like the main issue is that you're animating some parts with GSAP timeline code, and other parts manually with the AnimateCC timeline. So it depends on how all of the movieclips are setup and how they're animated.

If they are nested movieclips, does the parent movieclip have more than one frame (i.e. is it on an animated Animate CC timeline with length / enough frames)? If so, and if your child movieclips don't have any interactivity, you could change the child movieclips to Graphics / Play Once, then it'll act and sync just like it's part of the parent movieclip's timeline (Animate CC timeline not GSAP's timeline). That would be an easy option but sounds like the parent movieclips are animations generated with GSAP code, not the Animate CC timeline.

It sounds like the child moveclips are hand-animated Animate CC timeline animations since you're using gotoAndPlay and not adding to GSAP's timeline or a separate GSAP TimelineMax. If you were to use GSAP for those child animations, and then add them to the GSAP timeline, it would be controlled there easily -- if that makes sense.

If your child mc's are hand-animated with Animate CC's timeline, another option would be to loop through each of the child instances whenever the timeline is paused, get their current frame, determine if they're animating (if the current frame is greater than zero but less than total frames (some simple logic like that), and if so, target them via this.childMovieClipInstanceName.stop(); ... or make them play again when it's resumed.
 

[flysi3000 54 Likes (Contributor)]

@davi yep, that's exactly my problem. Main Animate CC timeline has only one frame; I have a couple of nested clips with manual animation. 

 

Might follow your suggestion of making child clips into graphics. Thanks!

[Carl 9,758 Likes (Superhero)]

This is a great use for the EaselPlugin which allows you to tween frames in a MovieClip

 

var tl = new TimelineMax({repeat:1, yoyo:true});
tl.to(this.box, 1, {x:300})
  .to(this.numbers, 1, {easel:{frame:32}})// tween the numbers mc to frame 32 for 1 second
  .to(this.numbers, 1, {x:200})

 

 

I attached a scrappy FLA to illustrate

 

You just need to load TweenMax and the EaselPlugin

 

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/EaselPlugin.min.js

 

 

easel-frame-tween.fla.zip

[flysi3000 54 Likes (Contributor)]

Holy smokes - that's fantastic. I knew there had to be a way to tween movie clip frames...

 

Thanks @Carl!