Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
flysi3000

TimelineMax + Animate CC Timeline - Controlling Mixed Animation

Recommended Posts

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!

Link to post
Share on other sites

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.
 

  • Like 1
Link to post
Share on other sites

@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!

  • Like 1
Link to post
Share on other sites

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

  • Like 2
Link to post
Share on other sites

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

 

Thanks @Carl!

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×