AwesomeAnimation/ParallaxLogin

Simple butter-smooth animations created using React-Native for demonstrating the capabilities of the Animated API of react native. It is bootstrapped with Create React Native App.

Demo

Page Switch Animation	SubmitButton Animation	Shattering Image Animation

Demo on Expo

Scan with Expo

Scanning this QR code with your Expo mobile app loads this experience immediately.

OR

Type the Address

Typing

exp://exp.host/@shubham56/awesomeanimation

inside of Expo will also open this experience.

Need Expo?

With Expo you can build, share and enjoy many mobile experiences. Download the app to try AwesomeAnimation today. For links to install the Expo app, please visit https://expo.io.

Dependencies

• React Native
• React Navigation
• NativeBase
• Expo

To use this package

1. Add this to packgage.json of your project

$ "triple-animation":"git+https://github.com/shubham56/TripleAnimationDemo.git"

2. Run the following command in your project directory

$ npm install

3. How to use

#1 Page Switch Animation

import { PageSwitchBackground } from "triple-animation";

PROPS

note: Array of size 2 where in each 0th index is the color of corresponding Large Decor on 1st page and 1th index is the color of corresponding Large Decor on 2st page

<PageSwitchBackGroundAnims
  containerStyle={{ backgroundColor: '#000' }}
  backgroundImage={require('../../Assets/background-image.png')}
  logo={require('../../Assets/logo.png')}
  logoStyle={{ marginBottom: 30 }}
  lgDecorColorArray={[
    ['rgba(255,165,0,1)', 'rgba(50,205,50,1)'],
    ['#ff0000', '#7d18f2']
  ]}
  switchButtonColor1="rgba(255,0,0,0.5)"
  switchButtonColor2="rgba(125, 24, 242, 0.5)"
  smDecorColor="#ccc"
  dimensionsSmDecor={50}
  dimensionsLgDecor={450}
  noOfDecors={6}
  page1SwitchText="Login"
  page2SwitchText="Register"
  page1={
    <LoginForm
      usernameChange={event => console.log(event.nativeEvent.text)}
      passwordChange={event => console.log(event.nativeEvent.text)}
      onPressSubmit={this._buttonPress.bind(this)}
      color="rgba(255,165,0,1)"
    />
  }
  page2={
    <RegistrationForm
      usernameChange={event => console.log(event.nativeEvent.text)}
      passwordChange={event => console.log(event.nativeEvent.text)}
      confirmPasswordChange={event => console.log(event.nativeEvent.text)}
      emailChange={event => console.log(event.nativeEvent.text)}
      onPressSubmit={this._buttonPress.bind(this)}
      color="rgba(50,205,50,1)"
    />
  }
/>

#2 SubmitButton Animation

import { SubmitButtonWithAnimation } from "triple-animation";

PROPS

<SubmitButtonWithAnimation
  width={width - 40}
  height={45}
  color={this.props.color}
  onPress={this.props.onPressSubmit}
  text="Login"
/>

#3 Shattering Image Animation

import { ShatteringImage } from "triple-animation";

<ShatteringImage
  noOfHorizontalFragments={10}
  noOfVerticalFragments={10}
  image1={require('../../Assets/Geek.jpg')}
  image2={require('../../Assets/logo-icon-lg.png')}
/>

note: The Animation will trigger on clicking the image

Credits

NativeBase

ReactNative

Expo

ReactNavigation