Hello @jscottsmith. Parallax Component and Listener are super cool. The component works generally, except image loading is messing up the parallax calculations, and I am having issues getting the controller to update. Any way I try to call the update() method throws an error. Any help sorting this out would be really appreciated.
Here is my code:
`
import React, {Component} from 'react'
import { Parallax, ParallaxController } from 'react-scroll-parallax';
import styled from 'styled-components'
import media from '../components/mediaquery.jsx'
const City = styled.section margin: 5em 0; width: 100%;
const TextWrap = styled.div display: flex; flex-flow: row wrap; justify-content: space-between; margin: 5em 0; ${media.to.smmargin: 2em 0;`}
h2 {
width: 45%;
${media.to.xl width: 45%;}
${media.to.lg width: 100%;}
${media.to.md width: 100%;}
${media.to.sm width: 100%;}
}
p {
width: 45%;
${media.to.xl width: 45%;}
${media.to.lg width: 100%;}
${media.to.md width: 100%;}
${media.to.sm width: 100%;}
}
`
const ImageWrap = styled.section display: flex; flex-flow: row wrap; justify-content: space-between; margin: 5em 0; padding: 0; ${media.to.smmargin: 2em 0;`}
.city-image:nth-child(even) {
margin: 2em 5%;
width: 35%;
}
.city-image:nth-child(odd) {
margin: 2em 5%;
width: 35%;
}
img {
height: 100%;
width: 100%;
}
`
class CityComponent extends Component {
componentWillMount(){
ParallaxController.init()
}
componentDidMount() {
ParallaxController.update() // THIS IS WHAT THROWS THE ERROR
}
render() {
const Gallery = this.props.gallery.map((image, index) => {
let keyValue = ${this.props.name.toLowerCase()} + '_' + ${index}
if ( index % 2 === 0 && index !== 0 ) {
return (
<Parallax
className="city-image"
offsetYMax={'60%'}
offsetYMin={'0%'}
slowerScrollRate
tag="figure"
key={keyValue}
>
<img src={this.props.gallery[index]} alt={this.props.name} />
</Parallax>
)
} else if ( index !== 0 ) {
return (
<Parallax
className="city-image"
offsetYMax={'30%'}
offsetYMin={'0%'}
slowerScrollRate
tag="figure"
key={keyValue}
>
<img src={this.props.gallery[index]} alt={this.props.name} />
</Parallax>
)
}
})
return (
<City>
<TextWrap>
<h2>{this.props.name}</h2>
<p>{this.props.text}</p>
</TextWrap>
<ImageWrap>
<img src={this.props.gallery[0]} alt={this.props.name} />
{Gallery}
</ImageWrap>
</City>
)
}
}
export default CityComponent
`
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent