Using gsap.utils for a character rig

[michaelsboost]

I made a simple pen to show how to

See the Pen xxXMQNW by michaelsboost (@michaelsboost) on CodePen

(can be used for eyes, noses, poses, etc: It's just to get the point across). What I'm trying to figure out is how can I apply the rig to the timeline using the GSAP way. For example, have mouth 3 show first and have a duration for 1 second and then mouth 5 show and have a duration for 2 seconds.

 

I feel like I would need to use gsap.utils for this utilizing toArray() and maybe wrap() but only thing I got working was the demo I provided after 2 days of tinkering. 

If anyone can help it'd be greatly appreciated.

See the Pen abLMmKR by michaelsboost (@michaelsboost) on CodePen

[GreenSock]

Personally, I like making things object-oriented using a class and exposing a simple getter/setter function that I can animate if I want to.

 

So in use, it'd look like:

let mouth = new Frames(".mouths > svg > g > g > g"); 

mouth.frame(5); // jump to frame 5

// or sequence things in a timeline:
let tl = gsap.timeline();
tl.set(mouth, {frame: 5}, 2)     // at the 2-seconds spot, jump to frame 5
  .set(mouth, {frame: 1}, "+=1") // 1 second later, jump to frame 1
  .set(mouth, {frame: 3}, "+=2") // 2 seconds later, jump to frame 3

Here's the class:

class Frames {
  constructor(elements, initialFrame) {
    this.elements = gsap.utils.toArray(elements);
    this.elements.forEach(el => el.style.visibility = "hidden"); // hide them all initially
    this.frame(initialFrame || 0); // set the initial frame
  }
  
  // this same function serves as a setter AND a getter. Just omit the parameter and it'll be a getter, like instance.frame()
  frame(number) {
    if (arguments.length) { // setter
      number = number | 0; // round up quickly
      if (number !== this._frame) { // if it's still the current frame, don't do anything (fast).
        let oldEl = this.elements[this._frame],
            newEl = this.elements[number];
        if (newEl) { // in case someone tries setting to a frame that doesn't exist
          newEl.style.visibility = "visible";
          if (oldEl) {
            oldEl.style.visibility = "hidden";
          }
          this._frame = number;
        }
      }
    }
    return this._frame;
  }
}

And here it is in use:

See the Pen KKXEmqB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you were looking for?