Jump to content
GreenSock

Handycam

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

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×