CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Lim SY
Lim SY

Reputation: 185

Simulate bounceInDown easing effect from animate.css

animate.css

I'm writing a slot machine game and I have code similar to this: JSFiddle

$('#test').css( "margin-top", 7400px );
$('#test').animate(
    {"margin-top": "0px"},
    {'duration' : 3000, 'easing' : $.bez([0,0,0.9,1.1])}
);

I'm not satisfied with the result. It just doesn't seem smooth at the end. Is there any library that has the easing effect like the one from animate.css? The bounceInDown effect from animate.css just move from outside the frame which I cannot control(I think?). The elements in the game that I'm writing has to move from one point to other. I tried the easeOut effect that comes with jquery too but again I'm not satisfied with it.

Upvotes: 0

Views: 544

Answers (1)

ScientiaEtVeritas
ScientiaEtVeritas

Reputation: 5278

If you want it to smoothly bounce, I suggest to use multiple keyframes (since your current animation is limited by just end keyfrome and one bezier function), but unfortunately jQuery's animate() does not support multiple keyframes. So I would recommended to use CSS for this. Or check out some additional libraries for that like jQuery.Keyframes.

Just imagine keyframes as steps or states between the start keyframe and end keyframe:

enter image description here

If you like the animation of animate.css just have a look what they do in their animation (I removed prefixes to shorten this coding).

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}

Just get inspired by it and maybe change it to your favor.

Upvotes: 2

Related Questions