Jump to content
Search Community

Wiggle Effect

Thales Ribeiro 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

Hi there,

i'm trying to replicate an animation i did in After Effects using the Wiggle expression.

 

The problem is that my animation in Greensock is far from looking as 'fluid' as the one i did in after effects.

 

 

The way i did my animation in after effects i set up how much a value will change and the frequency of this change.

 

for instance: wiggle(freq, amp) wiggle(2, 50);

 

 

 

 

Have a look at the code i created, on the same link you can check out the animated gif i'm trying to replicate.

 

 

See the Pen qBxir by anon (@anon) on CodePen

 

 

The animation is basically a constant wobbly effect on all those icons, i also want the animation to be random.

 

Do you guys see this as a good way of doing this? I tried changing the easing but i still couldn't get it to look close to the gif. Is there a better way of doing this?

 

Cheers, 

Thales

 

Link to comment
Share on other sites

Seems like a pretty good method. I made a few modifications though to separate each property and randomise it in a simpler way. You may have noticed, but you had wiggle being called at the end of multiple tweens each time, which would have caused a bit of stiltedness as each wiggle would overwrite any existing wiggle tweens.

 

See the Pen hHegc by jamiejefferson (@jamiejefferson) on CodePen

 

You know, it's not perfect, but it's just wiggling icons... how perfect do wiggling icons need to be?

$(document).ready(function(){
  wiggle(".icon");
});

function wiggle(selector){
  $(selector).each(function() {
    wiggleProp(this, 'scale', 0.93, 1);
    wiggleProp(this, 'rotation', -5, 5);
    wiggleProp(this, 'x', -3, 3);
    wiggleProp(this, 'y', -3, 3);
  })
}

function wiggleProp(element, prop, min, max) {
  var duration = Math.random() * (.6 - .3) + .3;
  
  var tweenProps = {
    ease: Power1.easeInOut,
    onComplete: wiggleProp,
    onCompleteParams: [element, prop, min, max]
  };
  tweenProps[prop] = Math.random() * (max - min) + min;

  TweenMax.to(element, duration, tweenProps);
}
  • Like 7
Link to comment
Share on other sites

Your code looks a lot better than mine!

 

I knew the code i created wasn't the best and easiest way of animating it, but as a designer i just couldn't figure out a way of making a better code.

 

The animation now is a lot smoother and i can see it's simpler to randomise as well.

 

Thanks,

Thales

  • Like 1
Link to comment
Share on other sites

A simple coding error is all it was.

these lines were in error:

var randomScale = (Math.random() * (maxScale - minScale)) + minScale;

var randomRotation = (Math.random() * (maxRotation - minRotation))+ minRotation;

var randomPosition = (Math.random() * (maxPosition - minPosition)) + minPosition;

 

this is the fis:

var randomScale = (Math.random() * (maxScale - minScale) + minScale);

var randomRotation = (Math.random() * (maxRotation - minRotation) + minRotation);

var randomPosition = (Math.random() * (maxPosition - minPosition) + minPosition);

Link to comment
Share on other sites

Actually, you'll find that there is no difference at all the original and your fix, due to order of operations. () first, * and / second, then + and - last.

 

This is also completely identical

var randomScale = Math.random() * (maxScale - minScale) + minScale;

var randomRotation = Math.random() * (maxRotation - minRotation)+ minRotation;

var randomPosition = Math.random() * (maxPosition - minPosition) + minPosition;

  • Like 1
Link to comment
Share on other sites

  • 9 months later...

jamiejefferson, can you help me how I should modify the code to work on an svg image element? I want to achieve exactly the same wiggle effect.

 

Following what I read here, I wrapped the attributes in a attr{} object (see code below). But it's still not working. jQuery correctly selects the image elements but something must break then when I call

TweenMax.to(element, duration, tweenProps);

because I'm getting this error

Uncaught TypeError: undefined is not a function.

Here is my code:

wiggle("image");

	function wiggle(selector){
		$(selector).each(function() {
	    wiggleProp(this, 'x', 3 , 3);
	    wiggleProp(this, 'y', -3, 3);
	})
	}

	function wiggleProp(element, prop, min, max) {
		var duration = Math.random() * (.6 - .3) + .3;
		var tweenProps = {
			ease: Power1.easeInOut,
			onComplete: wiggleProp,
			onCompleteParams: [element, prop, min, max],
			attr: [],  //line added
			autoCSS:false //line added
		};

		tweenProps.attr[prop] = Math.random() * (max - min) + min; //edited
		TweenMax.to(element, duration, tweenProps);
	}
Link to comment
Share on other sites

  • 8 months later...

hey guyz, i wanna use it On mouseover , and finish it On mouseout event, and im not quiet goOd with javascript things

 

$("#box").mouseout(function(){
TweenMax.staggerTo(".boxes",0.2,{scale:1},0.05);


wiggle(".boxes");


function wiggle(selector){
 $(selector).each(function() {
wiggleProp(this, 'scale', 0.93, 1);
wiggleProp(this, 'rotation', -5, 5);
wiggleProp(this, 'x', -3, 3);
wiggleProp(this, 'y', -3, 3);
 })
}


function wiggleProp(element, prop, min, max) {
 var duration = Math.random() * (.1 - .2) + .1;


 var tweenProps = {
ease: Power1.easeInOut,
onComplete: wiggleProp,
onCompleteParams: [element, prop, min, max]
 };
 tweenProps[prop] = Math.random() * (max - min) + min;


 TweenMax.to(element, duration, tweenProps);
}
});

but i cant stop them On mouseout.

Thanks.

 

Link to comment
Share on other sites

Do you understand why it keeps playing? As soon as the animation finishes, it calls the same wiggleProp function over and over again. There are several different things you could do, like preventing the function from running or being called again, but the easiest is probably just to kill the animations using TweenLite.killTweensOf().

// Kill em' all
TweenLite.killTweensOf(".boxes");

See the Pen xwWwBO?editors=001 by osublake (@osublake) 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.
×
×
  • Create New...