Lepas is 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.


Leaps is a render-less component, which accepts from and to props, and provide you with the current state using leaps scoped-slot.

basic example

<leaps :from="{ x: 0 }" :to="{ x: 300 }">
    slot-scope="{ leaps }"
    :style="`transform: translateX(${leaps.x}px);`"

animate attributes

<leaps :from="{ x: 0 }" :to="{ x: 72 }">
    slot-scope="{ leaps }"
    <path d="..."

inner text

<leaps :from="{ text: 0 }" :to="{ text: 100 }">
  <span slot-scope="{ leaps }">{{ Math.round(leaps.text) }}</span>


The animation duration and easing is based on physics parameters (stiffness, damping and mass), changing one of those parms or all can give you a different animation behavior. in this demo section there's a great "Spring Parameters Chooser" for you to have a feel of what spring is appropriate, rather than guessing a duration in the dark.



Prop Default Description
from {} start values
to 1 end values
stiffness 170 the force required to cause element deflection
damping 26 element damping force
mass 1 element mass
velocity 0 element starting velocity
precision 0.01 animation damped precision
direction 'forwards' set animation direction to be forward, reverse, or alternate