Skip to content
/ leaps Public

🎥 Declarative Vue.js animations library, spring-physics based.

Notifications You must be signed in to change notification settings

baianat/leaps

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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