react-page-transitions
DEMO!
Page tranistions for ReactJS based on VelocityJS library. Mobile friendly. High performance.
Change log
1.2.0
- You can pass className along with other params
<PageContainer className="some-test-class"> <div>...</div> </PageContainer>
- Simplifying method responsible for passing props to component.
1.1.0
- Additional parameters easing and duration (kudos to @simon-johansson)
- Additional parameter callback. Fired when animation is completed.
Getting Started
Install: npm install react-page-transitions
var React = ;var PageContainer = ; var PageTest = React; moduleexports = PageTest;
Params
You can use custom parameters to set start and end styles. In example:
{ var startStyles = 'opacity': 0 'scale': 5 ; var endStyles = 'opacity': 1 'scale': 1 ; var duration = 1000; var easing = 'easeInExpo'; var { ; }; return <PageContainer startStyles=startStyles endStyles=endStyles duration=duration easing=easing callback=callback > <div>...</div> </PageContainer> ;} moduleexports = PageTest;
Velocity currently doesn't support multiple hooks in one call so what I'm doing is:
- Iterate through all keys and values in startStyles objects. Hook all of them.
- Start Velocity animate with endStyles.
Without this parameters it will just go with defaults (TranslateX from 100% to 0).
Styles (CSS)
For mobile I suggest to use this so animation will be affecting whole page:
{ return <PageContainer> <div className="content">...</div> </PageContainer>
//
How its working?
Component renders with display none property. On componentDidMount I'm using Velocity hook to set translateX -100% to the container. Add child component. Set display block. Start VelocityJS animation to translateX 0. After that I'm also adding loaded-page class to container in case you want to use webkit scroll touch.