react-gsap-parallax
to run the demos, clone this, then
$ npm install$ npm run start
run localStorage.debug = 'react-gsap-parallax*'
in your console to see logging
ParallaxContainer
static propTypes = children: ReactPropTypesnodeisRequired className: ReactPropTypesstring id: ReactPropTypesstring style: ReactPropTypesobject children: ReactPropTypesnodeisRequired top: ReactPropTypesnumber height: ReactPropTypesnumberisRequired scrolljack: ReactPropTypesbool onScroll: ReactPropTypesfunc scrollableAncestor: ReactPropTypesnodestatic defaultProps = scrolljack: false
If scrolljack is set, the scrollhandler will use TimelineMax.tweenTo rather than TimelineMax.seek.
The parallax container can be positioned down the page--not necessarily at the top. Use the top
and height
props to control its position.
Parallax
static propTypes = children: ReactPropTypesnodeisRequired className: ReactPropTypesstring id: ReactPropTypesstring keyframes: ReactPropTypesobjectisRequired style: ReactPropTypesobjectstatic defaultProps = {}
Keyframes is an object with parseIntable keys betwene 0 and 100, and values which are passed as 'vars' to TweenLite.to.
keyframes='0%': top: '100vh' left: 0 fontSize: '12px''100%': top: '0vh' left: 0 fontSize: '36px'