Shake an element, like "no" with GSAP3 and Angular

[Handycam 0 Likes (Newbie)]

I found some hints online on how to use GSAP3 with angular and it works well.  However, for some reason I am unable to create a timeline which "shakes" the element as if it's saying "no" (back and forth 10 pixels on x 3 times).

 

I am trying 

 

shakeTL = gsap.timeline({ repeat: 5, yoyo: true });

shake() {

this.shakeTL.from(this.recipient.nativeElement, { x: 10, duration: 0.1 }),{ x: -10, duration: 0.1, clearProps: 'x' };

}

 

This is called from a button click.  The element shakes as expected but does not end up at the place it began (it's 10px to the right).  Also, repeated clicks on the button do not work.

I know there is a custom wiggle plugin but am looking for a solution without a paid plugin.

[Cassie 5,386 Likes (Superhero)]

Heya!

 

That's not valid syntax, seems like you're trying to combine syntax from a timeline and a fromTo tween maybe?
 

//not valid
this.shakeTL.from(this.recipient.nativeElement, { x: 10, duration: 0.1 }),{ x: -10, duration: 0.1, clearProps: 'x' };

// you could chain tweens on a timeline
this.shakeTL.to(this.recipient.nativeElement, { x: 10, duration: 0.1 })
.to(this.recipient.nativeElement, { x: -10, duration: 0.1})

// or do a fromTo tween
gsap.fromTo('.box', { x: 10 },{ x: -10, duration: 0.1, repeat: 5, yoyo: true });

 

Here you go

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

[GreenSock 18,577 Likes (Superhero)]

One other option is to use keyframes: 

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