peterennis Posted December 20, 2019 Share Posted December 20, 2019 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 Link to comment Share on other sites More sharing options...
OSUblake Posted December 20, 2019 Share Posted December 20, 2019 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 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 20, 2019 Share Posted December 20, 2019 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now