swampthang last won the day on June 19 2016

swampthang had the most liked content!

swampthang

Members
  • Content Count

    285
  • Joined

  • Last visited

  • Days Won

    1

swampthang last won the day on June 19 2016

swampthang had the most liked content!

Community Reputation

97 Contributor

About swampthang

  • Rank
    Advanced Member

Profile Information

  • Gender
    Male
  • Location
    Louisiana

Recent Profile Visitors

2,723 profile views
  1. swampthang

    Concatenate Eases with config

    Thanks, Jack. I think I've got it worked out. I built a pretty extensive set of input fields and select menus that are triggered visible based on which ease-type is selected. I'm using a switch statement to build them out from there.
  2. swampthang

    Concatenate Eases with config

    Ended up doing it something like this...
  3. swampthang

    Concatenate Eases with config

    Is there a way to assemble eases using variables including config for parameters? I was wondering if the ease object can be broken down into separate parameters - something like: let easeName = 'Elastic', easeType = 'easeOut', overshoot = 3; TweenMax.to('.ball',2,{ x: 400, ease: { name: easeName, type: easeType, config: function(overshoot) } });
  4. swampthang

    CustomWiggle and CustomBounce question

    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}`; */
  5. swampthang

    CustomWiggle and CustomBounce question

    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...
  6. swampthang

    CustomWiggle and CustomBounce question

    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!
  7. swampthang

    CustomWiggle and CustomBounce question

    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?
  8. swampthang

    CustomWiggle and CustomBounce question

    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.
  9. swampthang

    CustomWiggle and CustomBounce question

    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?
  10. swampthang

    CustomWiggle and CustomBounce question

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

    CustomWiggle and CustomBounce question

    You bet, Jack. Thanks for that.
  12. swampthang

    CustomWiggle and CustomBounce question

    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});
  13. swampthang

    CustomWiggle and CustomBounce question

    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?
  14. swampthang

    autoRotate immediateRender?

    Here's another version of it that animates a green (good color, eh?) ball along the path with each change.
  15. swampthang

    autoRotate immediateRender?

    Just wanted to add this to the codepen stack in case anyone might get something out of it. I'm setting transformOrigin for rotation to happen at the end of a path and added a draggable to a rotation knob and a box that stays centered around the end point of the path. You can rotate the knob or enter a new offset value in either of the 2 fields.