Wiggle or shake animation?

Animation
1

How can I use Hype to have an object wiggle or shake? I want the beginning and end points of the object to remain the same, but just want to to provide some back and forth movement. Along the lines of what can be done with CSS https://bit.ly/3bViMSt or Greensock https://bit.ly/2V8eLTT

Is this possible using Hype tools?

3

For Shake: You would just need to recreate these (chaotic) keyframes in Hype: Press Record, move slightly, rotate slightly, advanced timeline a couple frames, and do it again. I would create this on an additional timeline. Copy + paste the initial keyframes so they are the same as your ending keyframe and have the entire animation loop.

@-webkit-keyframes shake {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

Wobble could be done with a custom easing transition, it is like a bounce, but you would change the point of origin for rotation (hold ⌘ + drag the transform origin point) so you can have the object teeter on a different axis than the center. But a wobble is a personal matter, and you should play around with easing transitions to perfect it.

Screenshot 2020-04-06 at 4.16.21 PM
Screenshot 2020-04-06 at 4.16.21 PM1032×1108 106 KB

It is sort of a damped / decaying sine wave:

https://www.motionscript.com/articles/bounce-and-overshoot.html

3 Likes
4

Thanks! Will use this as a starting point and see what I can do.

1 Like
5

I’m understanding how and why with the custom easing. What I don’t understand is how to apply the custom easing to wobble the element. I mean, if I have different z-rotation values at start and end, I can apply the custom easing. But I want my element’s z-rotation to be the same before and after the animation occurs. So how does this work? Hype file attached, if it makes it easier to explain.
wobble element.zip (13.5 KB)

1 Like
6

If Hype sees the same start and end value, it assumes there is no animation. (It would be a good enhancement to no longer have this assumption especially in the case of the new Math Equations timing functions!)

For now you’d need to either do this as a keyframe animation, or have a slightly different start/end value to register if you are going to use a pure timing function approach.

7

That would be an awesome enhancement! I’m doing fine with keyframe animation for these, but I’d love to see this happen to future Hype.

1 Like