peterennis

The pen does not do anything for me. When I check CSS is shows error in red. Does it need something special to run?

@GreenSock Yes, that helped. Thanks for the update.

The Manage Attachments to free up space link does not let me delete anything. I want to report this: https://codepen.io/GreenSock/pen/OJJBRWp shows broken on CSS. Bug or feature?

Demo is broken or I do not know how to make it work...

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'); } } ```