jQuery Easing Animation

Question

I need to show an animation where an input box falls from top, expands after falling and user can type in some text in that box using jQuery easing.. same effect like https://www.meperdi.es/

I have tried jQuery Easing plugin since I was bit hesitant to use only CSS for the animation as some users might not have new age browsers. But will use wick3d's solution below. — Maxx Decaux, Jul 21 '16 at 14:27

score 0 · Answer 1 · answered Jul 21 '16 at 10:01

0

Maybe some CSS and some jQuery addclass may help? https://jsfiddle.net/moongod101/s4L1909p/

answered Jul 21 '16 at 10:01

Felix Fong

969
1
8
21

score 0 · Answer 2 · answered Jul 21 '16 at 10:03

0

Looking at the animation you posted as an example, you can animate the input without using jQuery.

In fact - never use jQuery for animations, as it's very inefficient.

Still - animating the input can be done like in this fiddle

input.anim{
  display:block;
  margin:3rem auto;
  animation: showExtend 1.2s cubic-bezier(.25,1.52,.59,.9) forwards;
}


@keyframes showExtend{
  from{
    transform: translate(0%, -5000%) rotate(35deg) scale(1,.1);
  }
  50%{
    transform: translate(0%, 15%) rotate(15deg) scale(1,.5);
  }
  to{
    transform: translate(0,0) rotate(0deg) scale(1,1);
  }
}

answered Jul 21 '16 at 10:03

wick3d

652
6
17

Thanks wick3d. It was really helpful. You deserve +1 :) – Maxx Decaux Jul 21 '16 at 14:28
My pleasure ;] If you find my answer helpful - mark it down as the solution. Only tou can do it ;) Also, feel free to +1 my answear if it helped. – wick3d Jul 21 '16 at 19:16

jQuery Easing Animation

2 Answers2