https://github.com/alexcambose/motus

Animation library that mimics CSS keyframes when scrolling.
https://github.com/alexcambose/motus

animation css css-animations dom javascript keyframes parallax scroll typescript viewport

Last synced: 6 days ago
JSON representation

Animation library that mimics CSS keyframes when scrolling.

• Host: GitHub
• URL: https://github.com/alexcambose/motus
• Owner: alexcambose
• License: mit
• Created: 2018-05-22T18:42:59.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-06-08T14:09:46.000Z (over 1 year ago)
• Last Synced: 2024-10-29T23:35:04.471Z (2 months ago)
• Topics: animation, css, css-animations, dom, javascript, keyframes, parallax, scroll, typescript, viewport
• Language: JavaScript
• Homepage: https://alexcambose.github.io/motus/
• Size: 2.39 MB
• Stars: 631
• Watchers: 10
• Forks: 36
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - motus
• awesome-web-animation - Motus - Animation library that mimics CSS keyframes when scrolling. (Animate on scroll)

README

        
![Motus Logo](https://i.imgur.com/GpeWN0B.png "Motus logo")



      



  

  

  

   

  

  





  

  



# Why Motus ?

Motus allows developers to create beatuful animations that simulate CSS keyframes and are applied when the user scrolls.

## Features

- Node & Browser Support

- Simple and intuitive api

- Scroll hooks

- Both vertical and horizontal scrolling

# Getting started

Check out the [Quick Start](https://alexcambose.github.io/motus/) documentation to get started.

[Live demo](https://codesandbox.io/s/ol4v495l8z)

[Parallax demo](https://alexcambose.github.io/motus/parallax-demo)

# Usage 

```js 

let newAnimation = new Motus.Animation({

  $el: document.getElementById('element'),

  keyframes: [

    {width: 100},

    {width: 300}

  ]

});

Motus.addAnimation(newAnimation);

```



# Contributing

- Fork it

- Create your feature branch

- *Do something awesome*

- Commit what you have done `git commit -am 'Some changes'`

- Push to the branch `git push origin my-new-feature`

- Submit a pull request

For further information about the project please see the [development section](https://alexcambose.github.io/motus/#/development) from the documentation.

# Credits

Motus is created and maintained by Alexandru Cambose *(alexcambose)*

*I'm open to suggestions. Feel free to message me or open an issue. Pull requests are also welcome!*

## Contributors

### Code Contributors

This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].



### Financial Contributors

Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/motus/contribute)]

#### Individuals



#### Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/motus/contribute)]





















# License

Motus is made available under the [MIT License](LICENSE).