# Leaps

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.

# Using

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 }">
  <div
    class="box"
    slot-scope="{ leaps }"
    :style="`transform: translateX(${leaps.x}px);`"
  ></div>
</leaps>

# animate attributes

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

# inner text

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

# Configuration

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.

Damping: 26 Stiffness: 180 Mass: 1

# Props