hayanisaid / Rnal
Licence: mit
Animations library for react-native
Stars: ✭ 54
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Rnal
Xamanimation
Xamarin Forms Animation Library
Stars: ✭ 389 (+620.37%)
Mutual labels: animations, transitions, animation-library
Sunset.css
This library offers a collection of different CSS-powered transitions.
Stars: ✭ 99 (+83.33%)
Mutual labels: animations, transitions, animation-library
Animatable Component
Animate once, use Everywhere! 💫
Stars: ✭ 188 (+248.15%)
Mutual labels: animations, transitions, animation-library
Sequent
A simple continuous animation library for Android UI.
Stars: ✭ 263 (+387.04%)
Mutual labels: animations, animation-library
Aaviewanimator
AAViewAnimator is a set of animations designed for UIView, UIButton, UIImageView with options in iOS, written in Swift.
Stars: ✭ 33 (-38.89%)
Mutual labels: animations, animation-library
highway
Highway - A Modern Javascript Transitions Manager
Stars: ✭ 1,349 (+2398.15%)
Mutual labels: animations, transitions
Animatify Ios
Animation, Effects & Transitions for iOS
Stars: ✭ 350 (+548.15%)
Mutual labels: animations, transitions
React Overdrive
Super easy magic-move transitions for React apps
Stars: ✭ 3,001 (+5457.41%)
Mutual labels: animations, transitions
Hamburger React
Animated hamburger menu icons for React (1.5 KB) 🍔
Stars: ✭ 391 (+624.07%)
Mutual labels: animations, transitions
Transition X
{ } Declarative Kotlin DSL for choreographing Android transitions
Stars: ✭ 514 (+851.85%)
Mutual labels: animations, transitions
scrollxp
Alpine.js-esque library for scrolling animations on websites
Stars: ✭ 50 (-7.41%)
Mutual labels: animations, animation-library
transitionable-routes
Perform transitions when changing routes with React Router
Stars: ✭ 26 (-51.85%)
Mutual labels: animations, transitions
ionic-modal-custom-transitions
Add Custom Transitions to Ionic Modals.
Stars: ✭ 22 (-59.26%)
Mutual labels: animations, transitions
animated
🌊 Implicit animations for JavaFX.
Stars: ✭ 79 (+46.3%)
Mutual labels: animations, transitions
React Motion Layout
🦸 Beautiful immersive React hero animations.
Stars: ✭ 509 (+842.59%)
Mutual labels: animations, transitions
Animate Css Grid
Painless transitions for CSS Grid
Stars: ✭ 987 (+1727.78%)
Mutual labels: animations, transitions
Swiftui Animation Library
SwiftUI Animation Library. Useful SwiftUI animations including Loading/progress, Looping, On-off, Enter, Exit, Fade, Spin and Background animations that you can directly implement in your next iOS application or project. The library also contains huge examples of spring animations such as Inertial Bounce, Shake, Twirl, Jelly, Jiggle, Rubber Band, Kitchen Sink and Wobble effects. Browse, find and download the animation that fits your needs.
Stars: ✭ 898 (+1562.96%)
Mutual labels: animations, transitions
CustomSegueDemo
Demonstrates encapsulation of a custom view controller transition into a UIStoryboardSegue subclass
Stars: ✭ 31 (-42.59%)
Mutual labels: animations, transitions
Material-Design-Android
My stash for all things material, animations, typography, iconography, transitions, Animated VD, Color Palette API, UI design, and more.
Stars: ✭ 38 (-29.63%)
Mutual labels: animations, transitions
react-native animations library (rnal) that makes using the animations easy 🚀
Installation ⚓️
- NPM
npm -i rnal --save
- Yarn
yarn add rnal
How to use it 👇
🎈 Fade 🎈
import { Fade } from "rnal";
export default class App extends Component<Props, State> {
render() {
return (
<View style={{flex:1}}>
<Fade >
<Image
source={require("./images/flowrs.jpg")}
height={200}
width={450}
style={{ width: 350, height: 200 }}
resizeMode="cover"
/>
</Fade>
</View>
);
}
}
Options and props 🎁
| Props | Value | Default | Description |
|---|---|---|---|
| duration | number | 300 | Play the audio track that matches the system language. If none match, play the first track. |
| startWhen | boolean | false | set when the animation should start, by default the animation start when the component mount. |
| infinite | boolean | false | Determine if the animation is infinite or just run once. |
| direction | string | 300 | specify the direction of the animation ex("toRight", "toLeft", "up","down). |
| sets | Object | {from:0,to:180} |
set the point start and the end of the animation, used with Rotate animation . |
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].