Jump to content
Search Community

How to improve shake effects (Turbulence kind of effect)?

LeoZ test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have created 3 types of shake effect but they are not  looking what I am trying to make them. I am trying to create basic, horizontal, and constant shake effect like shown in below website: (Mostly preferring to create a plane shake effect when its in cloud or in storm).

https://elrumordelaluz.github.io/csshake/ 

Can anyone help me to improve my animation effects?

Thanks in advance!

See the Pen wYedpg by LeoZoe (@LeoZoe) on CodePen

Link to comment
Share on other sites

Yep, here's an effect using a uniform wiggle: 

See the Pen 5c20d3f0b2fc8ce3c6775bd34fb48a1b by GreenSock (@GreenSock) on CodePen

 

You can easily tweak things like timing, number of wiggles, etc. 

 

Some other CustomWiggle demos that might be useful:

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

 

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

 

 

If you don't want to use CustomWiggle, you could loop through some random values oscillating back and forth, but that's a bit more cumbersome. 

 

Is that what you're looking for? 

 

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Jack,

 

Thanks for the examples, I have implemented the swarm wiggle to great success to create a "sound equalizer display" in a web banner.

The one question I have, is there a way to pause/start the swarm, because the element that has my "equalizer" is not visible at all times, so I'd like to pause when not visible.

 

Thanks.

Link to comment
Share on other sites

Hey @ChrisGosling and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member!

 

You can pause the animation by saving the result of the swarm function to a variable (since it returns a timeline) and then using control methods on that variable. For example:

var swarmAnim = swarm(".ball", 400, 150, 12, 15);
swarmAnim.pause();

// later
swarmAnim.play();

Also, we recommend upgrading to GSAP 3 which has a smaller file size, a sleeker API, and a bunch of new features :) Making the switch is easy!

 

 

  • Like 1
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.
×
×
  • Create New...