GSAP v3 breaks animation

[peterennis]

TimelineLite and TimelineMax both complain that staggerTo is no longer a property

and it breaks the animation.

 

Do I have to stick with v2.1.3 or is there a workaround for v3?

 

The Codepen link is original source. It is adapted to work with Ionic and Angular.

 

Multiple clicks on the play button will intentionally make it jitter.

 

Code:

 

```

export class PandaPage implements OnInit {

 

  master = new TimelineLite();

  tl = new TimelineLite();

 

  constructor() { }

 

  drawJellyPanda() {

    const tlPanda = new TimelineLite({ delay: .5 });

 

    tlPanda

 

      // SET

      .set('.svg-container', { perspective: 200 })

      .set('#panda', { transformOrigin: 'center' })

 

      // JELLYPANDA MOTION

      .staggerTo('#panda *', 2, {

        scaleX: 1.2, scaleY: .85, y: -18, rotationX: 15, rotationY: -15, rotationZ: 2,

        ease: Elastic.easeOut

      }, .015, 0.2)

      .staggerTo('#panda *', 2, { scaleX: 1, scaleY: 1, y: 0, rotationY: 0, rotationX: 0, rotationZ: 0, ease: Elastic.easeOut }, .015, 0.4)

 

      // FACE MOVING LEFT

      .to('#face', .6, { x: -20, rotationY: -20, ease: Expo.easeOut }, 'b')

      .to('#head1', .6, { x: -14, rotationY: -20, ease: Expo.easeOut }, 'b')

      .to('#head2', .6, { x: -6, rotationY: -15, ease: Expo.easeOut }, 'b')

      .to('#ear1', .6, { y: 5, rotationY: -20, ease: Expo.easeOut }, 'b')

      .to('#ear2', .6, { y: 5, rotationY: -20, ease: Expo.easeOut }, 'b')

 

      // FACE MOVING RIGHT

      .to('#face', .6, { x: 20, rotationY: 20, ease: Expo.easeOut }, 'c+=.1')

      .to('#head1', .6, { x: 14, rotationY: 25, ease: Expo.easeOut }, 'c+=.1')

      .to('#head2', .6, { x: 6, rotationY: 15, ease: Expo.easeOut }, 'c+=.1')

      .to('#ear1', .6, { y: 5, rotationY: 20, ease: Expo.easeOut }, 'c+=.1')

      .to('#ear2', .6, { y: 5, rotationY: 20, ease: Expo.easeOut }, 'c+=.1')

 

      // PANDA BACK POSITION

      .to('#panda *', 1.5, { x: 0, y: 0, rotationY: 0 }, '+=1')

 

    return tlPanda;

  }

 

  onComplete() {

    this.tl.clear().add(this.drawJellyPanda());

    this.master.play(0);

  }

 

  ionViewWillEnter() {

    // console.log('ionViewWillEnter - This function will be called every time you enter the view');

    this.drawJellyPanda();

  }

 

  ngOnInit() {

    // console.log('ngOnInit JellyPage');

  }

 

}

```

See the Pen yNobEx by mrmoonrocket (@mrmoonrocket) on CodePen

[OSUblake]

Like this.

 

.to('#panda *', {
  duration: 2,
  scaleX: 1.2, 
  scaleY: .85, 
  y: -18, 
  rotationX: 15, 
  rotationY: -15, 
  rotationZ: 2,
  ease: "elastic",
  stagger: 0.015
}, 0.2)
.to('#panda *', { 
  duration: 2,
  scaleX: 1, 
  scaleY: 1, 
  y: 0, 
  rotationY: 0, 
  rotationX: 0, 
  rotationZ: 0, 
  ease: "elastic", 
  stagger: 0.015 
}, 0.4)

 

More advanced stagger options.

 

See the Pen vYBRPbO by GreenSock (@GreenSock) on CodePen

 

Simplified easing using strings.

 

https://greensock.com/docs/v3/Eases

 

 

[ZachSaucier]

Hey Peter and welcome to the GreenSock forums!

 

As shown by Blake, staggers are included in all tweens as of GSAP 3! So you don't have to use clunky separate methods like .staggerTo any longer. I recommend reading the "Top 5 Features of GSAP 3" that covers this and other things.