Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
swampthang

CustomWiggle and CustomBounce question

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 know CustomWiggle and Bounce are just wrappers for CustomEase and that an ease path is generated using the settings passed through to it. I'd like to be able to create a variable number of custom eases and bounces where type and frequency (wiggles or bounces) are set dynamically. For example, I'd love to be able to offer an input field for frequency and a select menu for type. I know I could create those on the fly but if one combo has already been created, it shouldn't be created again. Is there any way to pass at least the number of wiggles to an already created CustomWiggle as a property?

See the Pen 5c20d3f0b2fc8ce3c6775bd34fb48a1b?editors=1010 by GreenSock (@GreenSock) on CodePen

Link to post
Share on other sites

For example, let's say I want to offer up to 100 wiggles for each type. That would be like 500 different CustomWiggle eases. Something like:

CustomWiggle.create("xWiggle2", {type:"easeOut", wiggles:2});
CustomWiggle.create("xWiggle3", {type:"easeOut", wiggles:3});
CustomWiggle.create("xWiggle4", {type:"easeOut", wiggles:4});
// ......
CustomWiggle.create("xWiggle100", {type:"easeOut", wiggles:100});

 

Link to post
Share on other sites

So you're trying to alter an already-created CustomWiggle, right? I assume that's because you're thinking it'd be somehow "cheaper" performance-wise or something? No, it'd need to basically redo everything it does initially anyway (plot the SVG path, feed it to CustomEase, generate the lookup table for super-fast runtime evaluation, etc.)

 

I think you're much better off just creating things dynamically. If you're trying to avoid re-creating one that already exists (like a 52-wiggle version), just check for the existence and if there isn't one, create it. Like here's a simple function: 

function getWiggle(wiggles) {
    return CustomEase.get("xWiggle" + wiggles) || CustomWiggle.create("xWiggle" + wiggles, {type:"easeOut", wiggles:wiggles});
}

 

Does that help?

  • Like 5
Link to post
Share on other sites

Kind of like Jack's getWiggle function, but it will allow you to set the name. These all point to the same ease.

 

var ease1 = WiggleEase.create("ease1", {type:"uniform", wiggles:20});
var ease2 = WiggleEase.create("ease2", {type:"uniform", wiggles:20});
var ease3 = WiggleEase.create("", {type:"uniform", wiggles:20});

console.log("ease1 === ease2", ease1 === ease2); // true
console.log("ease2 === ease3", ease2 === ease3); // true

TweenLite.to("#basic1", duration, {x: positionVariance, ease: "ease1" });
TweenLite.to("#basic2", duration, {x: positionVariance, ease: "ease2" });
TweenLite.to("#basic3", duration, {x: positionVariance, ease: ease3 });

 

 

See the Pen GPrPYa?editors=0110 by osublake (@osublake) on CodePen

 

 

 

  • Like 2
Link to post
Share on other sites

You can do some interesting things by tapping into Ease.map. That's where GSAP stores all the eases.

 

Here's a live easing editor. It was just an experiment, but you should be able to see the potential.

 

See the Pen PxKmjK by osublake (@osublake) on CodePen

 

 

 

 

  • Like 5
Link to post
Share on other sites
1 hour ago, GreenSock said:

Does that help?

 

You bet, Jack. Thanks for that.

Link to post
Share on other sites

Awesome, Blake! On both accounts. Thanks both of you for 3 great insights into CustomEase and wiggle/bounce. You guys are waaaaay too smart!

  • Like 1
Link to post
Share on other sites

Taking this a step further, I'm trying to figure out how to get offset and bounce to work with an autoRotate path animation. I think my brain is in a cramp. This pen is taken from the one I did that allows you to drag stuff around and rotate the path. Can't figure out how to get it set right. In order to get the bounce to work right, I know I have to set transformOrigin such that it squashes correctly.

 

Also, the ball doesn't seem to be following the path accurately.

 

Any idea what I'm doing wrong?

 

See the Pen LMxKWN?editors=0010 by swampthang (@swampthang) on CodePen

 

Link to post
Share on other sites

What's the problem? If you set the transform origin to center, it looks correct to me, but I don't know if that's the effect you're going for.

 

Just noticed your modulus function here.

 

function revisedRotationVal(val) {
  if( val >= 360 ) {
    // get the remainder of R/360
    val = val % 360;
  }
  if( val < 0 ) {
    if( val <= -360 ) {
      val = val % -360;
    }
    val = 360 + val;
  }
  return val == 360 ? 0 : val;
}

 

 

You can shorten that to one line.

 

function mod(n) {  
  return (n %= 360) < 0 ? (n += 360) : n;
}

 

Or...

 

function mod(n) {
  return ((n % 360) + 360) % 360;
}

 

 

  • Like 3
Link to post
Share on other sites

Love the pithy mod function! Thanks.

 

I removed the border radius so you can see what's happening. If you use the timeline slider you can see that as it goes over the curve, the div seems to rotate more around the bottom right corner. What I was hoping I could do was keep it centered on the path but when it bounces, have it bounce like its origin is the side it's bouncing on.

 

Here's a screenshot of the box as it sort of tips up away from the path. 

 

ss1.png

Edited by swampthang
added screenshot
Link to post
Share on other sites

I think what's going on there is the square is too large relative to the path. I forked that pen and resized the square and path and it seems to rotate just fine. The only thing I can't figure out is how to get the bounce AND offset right when the path gets rotated. As you set the path rotation to anything other than 0 you see the square being offset differently. Is there a calculation or setting that can compensate for that?

See the Pen VqPoaQ?editors=0110 by swampthang (@swampthang) on CodePen

 

Link to post
Share on other sites

That's a non-trivial task because you're basically asking for it to have two different transformOrigins for different things (scale and position). With enough math, you can probably make it happen but I don't have time to craft a solution for you. Sorry. 

 

For what it's worth, I typically find it easier to set xPercent and yPercent to -50 rather than adding offsets to the bezier data: 

See the Pen 78f90120c6655f4d98cd19ab4062e509 by GreenSock (@GreenSock) on CodePen

 

That keeps it centered on the path nicely. But it doesn't address the "bounce on the right side" thing. 

  • Like 2
Link to post
Share on other sites

Thanks, Jack. Yea, I've had to go back and review some old trigonometry books. I've forgotten most of that stuff. You're library has made me lazy! If I can come up with a good solution will post it here. Was hoping my favorite genius, Blake, might be able to whip something up. Wish I had half his brain-power!

  • Like 2
Link to post
Share on other sites

Ok, I was waaaaay overthinking this. All I had to do was place the green square (that I'm currently animating) inside a container and animate the container. I set the square to scale x/y maintaining a transformOrigin on the right. The square itself doesn't even know it's being rotated so it works! Here's a fork from the above pen...

See the Pen dwvzKK?editors=0110 by swampthang (@swampthang) on CodePen

 

  • Like 2
Link to post
Share on other sites
  • 4 weeks later...

Just in case anyone stumbles upon this and needs this as a solution, here's how I decided to handle setting up Custom Bounce and CustomWiggle. In my settings, I only allow up to 100 levels of variance so when the app opens this gets run.

 

function createWigglesBounces() {
  let types = ['easeOut','easeInOut','anticipate','uniform','random'];
  for( let type of types ) {
    for( i = 1; i <= 100; i++ ) {
      CustomWiggle.create(`Wiggle.${type+i}`, {wiggles:i, type:type});
    }
  }
  for( let strength = 1; strength <= 10; strength++ ) {
    for( let squash = 1; squash <= 6; squash++ ) {
      CustomBounce.create(`Bounce${strength}.sq${squash}`, {strength:strength*.1, squash:squash});
    }
  }
}

 

Then, I can call the ease like this:

let wiggleType = 'random',
    numWiggles = 20,
    wiggleVariance = 10;

TweenMax.to(element, duration, {rotation: wiggleVariance, ease: `Wiggle.${wiggleType}${numWiggles}`})

/* or for bounce
let cbStrength = 5, cbSquash = 3;
    
ease: `Bounce${cbStrength}.sq${cbSquash}`;
*/

 

  • Like 2
Link to post
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.

×