All Projects → alexcambose → Motus

alexcambose / Motus

Licence: mit
Animation library that mimics CSS keyframes when scrolling.

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Motus

Scrollmonitor
A simple and fast API to monitor elements as you scroll
Stars: ✭ 3,250 (+547.41%)
Mutual labels:  viewport, scroll, dom
React Native Stretchy
🤸‍♀️A ReactNative scrollable stretchy header component
Stars: ✭ 216 (-56.97%)
Mutual labels:  scroll, parallax
Vue Prlx
🔮 Vue.js parallax directive you were looking for (can animate translate & background-position)
Stars: ✭ 140 (-72.11%)
Mutual labels:  scroll, parallax
render-props
㸚 Easy-to-use React state containers which utilize the render props (function as child) pattern
Stars: ✭ 33 (-93.43%)
Mutual labels:  dom, viewport
Materialviewpager
A Material Design ViewPager easy to use library
Stars: ✭ 8,224 (+1538.25%)
Mutual labels:  scroll, parallax
Rolly
Custom scroll with inertia, smooth parallax and scenes manager
Stars: ✭ 109 (-78.29%)
Mutual labels:  scroll, parallax
Emergence.js
Detect element visibility in the browser
Stars: ✭ 1,891 (+276.69%)
Mutual labels:  viewport, scroll
React Scroll Sync
Synced scroll position across multiple scrollable elements
Stars: ✭ 252 (-49.8%)
Mutual labels:  scroll, dom
onscroll-effect
A tiny JavaScript library to enable CSS animations when user scrolls.
Stars: ✭ 35 (-93.03%)
Mutual labels:  scroll, viewport
react-awesome-reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: ✭ 564 (+12.35%)
Mutual labels:  css-animations, viewport
scrollparent.js
A function to get the scrolling parent of an html element.
Stars: ✭ 51 (-89.84%)
Mutual labels:  dom, scroll
Simpleparallax.js
Simple and tiny JavaScript library that adds parallax animations on any images
Stars: ✭ 1,075 (+114.14%)
Mutual labels:  scroll, parallax
Lax.js
Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
Stars: ✭ 8,274 (+1548.21%)
Mutual labels:  scroll, parallax
React Scroll Parallax
🔮 React components to create parallax scroll effects for banners, images or any other DOM elements
Stars: ✭ 1,699 (+238.45%)
Mutual labels:  scroll, parallax
react-scroll-trigger
📜 React component that monitors scroll events to trigger callbacks when it enters, exits and progresses through the viewport. All callback include the progress and velocity of the scrolling, in the event you want to manipulate stuff based on those values.
Stars: ✭ 126 (-74.9%)
Mutual labels:  scroll, viewport
React Awesome Reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: ✭ 346 (-31.08%)
Mutual labels:  viewport, css-animations
React Native Parallax Scroll
Parallax scroll view for react-native
Stars: ✭ 385 (-23.31%)
Mutual labels:  scroll, parallax
Rollingnotice
所有的垂向滚屏这一个库就够了!!!滚动公告、轮播广告,支持灵活自定义cell。淘宝、口碑、京东、美团、天猫等等一切滚动广告 Roll Notice or Advertising, customize cell as UITableViewCell supported, Swift version is also ready
Stars: ✭ 445 (-11.35%)
Mutual labels:  scroll
Vue Mq
📱 💻 Define your breakpoints and build responsive design semantically and declaratively in a mobile-first way with Vue.
Stars: ✭ 474 (-5.58%)
Mutual labels:  viewport
Imba
🐤 The friendly full-stack language
Stars: ✭ 5,434 (+982.47%)
Mutual labels:  dom

Motus Logo

Build Coveralls github npm bundle size Gitter GitHub issues version license maintenance

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 documentation to get started.

Live demo

Parallax demo

Usage

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 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].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

Motus is made available under the MIT License.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].