Wobble Elastic Animation in Html

问题:

Take a look at this Dribble

https://dribbble.com/shots/2149937-Day-6-Currency-Status-Rebound

There is a green bar that comes in at the end of the animation with a cool effect. I want to do that in html.

Any advice on how to achieve this?

回答1:

Yes possible. Here is one example Elastic SVG and there are plenty of other examples and libraries available to create these types of FXs using SVG or Canvas elements and javascript.

回答2:

@Blindman67 has given a good link. but it is very restrictive and not expandable.

but i found some other cool way.

update svg path attribute with JavaScript and animate it with dynamic.js

<svg>
  <path fill="#3F51B5" d="M0,0 L320,0 320,160Q160,160 0,160"></path>
</svg>

can easily update the "d" attribute with jQuery or JavaScript

check this fiddle below.. its built with vuejs but its a good example. http://jsfiddle.net/yyx990803/2eg8kbyk/light/

hope it helps someone.