Search code examples
javascripthtmlanimationgsap

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?

Solution

  • @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.