Notable Peru Mariachis


    0.0.10 • Public • Published

    leaps logo

    Average time to resolve an issue Percentage of issues still open npm npm

    Inner Text Animation Basic Animation SVG Animation

    Inner Text Animation

    Inner Text Animation


    Leaps is a set of simple, physics-based Vue.js animation components. It covers the most of your UI related animation needs where CSS just isn't enough anymore.

    Shipped with

    • Leaps
      • The primary animation component, which is a spring-physics based. Its main role is to move property from one value to another, with more natural animation and easing.
    • Parallax
      • Used move property from one value to another, based on the scrolled distance.
    • Reveal
      • Used to apply CSS animation class to an element, when it enters the view-port.

    Why Physics

    Traditional animation methods are based on duration time and ease function, while the animation goes from the start state to the end state, event if using Bézier easing can be very limiting. Due to having only two handles, you can't produce some complex physics effects. If you go beyond three sequences CSS become complex with delays and you end up having to do a lot of recalculation if you adjust the timing.

    Hard-coded durations are opposed to continuous, fluid interactivity. If your animation is interrupted mid-way, you'd get a weird completion animation if you hard-coded the time. Instead of hard-coded duration, we will use a physical model to determine our animation duration and easing, based on the element dumping, and mass. Instead of guessing the animation parameters that fits best with your animation, there is an interactive configuration section in the documentation that will guide you.

    Config Animation




    npm i leaps

    DownloadsWeekly Downloads






    Unpacked Size

    12.4 MB

    Total Files


    Last publish


    • abdelrahman3d
    • logaretm