https://github.com/baianat/leaps

🎥 Declarative Vue.js animations library, spring-physics based.
https://github.com/baianat/leaps

animation animation-component leaps physics spring-physics

Last synced: 10 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/baianat/leaps
• Owner: baianat
• Created: 2018-10-30T13:13:35.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-03T21:08:04.000Z (almost 2 years ago)
• Last Synced: 2023-02-27T04:31:17.331Z (over 1 year ago)
• Topics: animation, animation-component, leaps, physics, spring-physics
• Language: JavaScript
• Homepage: https://baianat.github.io/leaps/
• Size: 12.8 MB
• Stars: 53
• Watchers: 2
• Forks: 3
• Open Issues: 15
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

    

  





  

  

  

  





  

  

  





  





  



# 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](https://baianat.github.io/leaps/leaps.html)

  * 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](https://baianat.github.io/leaps/parallax.html)

  * Used move property from one value to another, based on the scrolled distance.

* [Reveal](https://baianat.github.io/leaps/Reveal.html)

  * 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](https://en.wikipedia.org/wiki/Damping_ratio) 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.