Jump to content
Search Community

TimelineMax + Animate CC Timeline - Controlling Mixed Animation

flysi3000 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
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.
×
×
  • Create New...