Jump to content
Search Community

Adobe Animate cc2017 and gsap - wiggle effect

paper 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

Hello,

i'm trying to replicate a wiggle effect in adobe animate using gsap

i'm using custom template for gsap library,

i have a lot of movieclips (45) and i have to animate them in x and y position randomly so i think gsap is the way to do that...

Someone coul'd help me to achieve this result :-)

tnx in advance

Giuseppe

Link to comment
Share on other sites

Since you are Shockingly Green you should use CustomWiggle.

Just be sure to load the CustomEase and CustomWiggle scripts into your template in addition to TweenMax

 

You should be able to do something like this: http://codepen.io/GreenSock/pen/wzkBYZ?editors=0010 but you wouldn't need all the code for creating DOM elements. Just create a bunch of tweens on your MovieClips and use a CustomWiggle ease with type:"random".

 

Wiggle Types: http://codepen.io/GreenSock/pen/GrggOL

 

To understand how to get started with CustomEase and CustomWiggle watch the videos here: https://greensock.com/wiggle-bounce

 

 

 

 

Another more crude approach is to create a function that randomly moves and element and then calls the same function again when the animation is complete. You can add whatever parameters you want to control the duration or distance travelled.

 

function moveRandom(element, duration, x, y) {
  console.log("move", element)
  TweenLite.to(element, Math.random() * duration, {
    x:Math.random() * x, 
    y:Math.random() * y, 
    ease:Power2.easeInOut,
    onComplete:moveRandom, 
    onCompleteParams:[element, duration, x, y]})
}
/////////////////// duration, x, y
moveRandom(".green", 2, 200, 200);
moveRandom(".orange", 4, 100, 200);
moveRandom(".grey", 0.05, 3, 3);

http://codepen.io/GreenSock/pen/wzkBYZ?editors=0010

  • Like 3
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...