react-gsap-parallax

react-gsap-parallax

• codepen
• demo
• github
• npm

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: React.PropTypes.node.isRequired,
  className: React.PropTypes.string,
  id: React.PropTypes.string,
  style: React.PropTypes.object,
  children: React.PropTypes.node.isRequired,
  top: React.PropTypes.number,
  height: React.PropTypes.number.isRequired,
  scrolljack: React.PropTypes.bool,
  onScroll: React.PropTypes.func,
  scrollableAncestor: React.PropTypes.node
}
static 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: React.PropTypes.node.isRequired,
  className: React.PropTypes.string,
  id: React.PropTypes.string,
  keyframes: React.PropTypes.object.isRequired,
  style: React.PropTypes.object,
}
static 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'}
}}