White page between layers

alanwunsche commented 7 years ago

I implemented the code for http://react-springy-parallax-simple.surge.sh/ but get white pages between the layers. Any ideas why?

samyoungnyc commented 7 years ago

I also am wondering why this is happening, is there a way to skip the layers in between?

drcmda commented 7 years ago

@alanwunsche @samyoungnyc maybe i screwed something up. Could you paste the code that causes white pages?

neilkrichi commented 7 years ago

@drcmda I'm having the same issue after implementing the sample code:

import React from 'react'
import Parallax from 'react-springy-parallax'

export default class extends React.Component {
    render() {
        const styles = {
            fontFamily: 'Menlo-Regular, Menlo, monospace',
            fontSize: 14,
            lineHeight: '10px',
            color: 'white',
            display: 'flex', alignItems: 'center', justifyContent: 'center'
        }
        return (
            <Parallax ref="parallax" pages={3}>

                <Parallax.Layer offset={0} speed={1} style={{ backgroundColor: '#243B4A' }} />
                <Parallax.Layer offset={1} speed={1} style={{ backgroundColor: '#805E73' }} />
                <Parallax.Layer offset={2} speed={1} style={{ backgroundColor: '#87BCDE' }} />

                <Parallax.Layer
                    offset={0}
                    speed={0.5}
                    style={styles}
                    onClick={() => this.refs.parallax.scrollTo(1)}>
                    Click!
                </Parallax.Layer>

                <Parallax.Layer
                    offset={1}
                    speed={-0.1}
                    style={styles}
                    onClick={() => this.refs.parallax.scrollTo(2)}>
                    Another page ...
                </Parallax.Layer>

                <Parallax.Layer
                    offset={2}
                    speed={0.5}
                    style={styles}
                    onClick={() => this.refs.parallax.scrollTo(0)}>
                    The end.
                </Parallax.Layer>

            </Parallax>
        )
    }
}

deadcoder0904 commented 7 years ago

@alanwunsche @neilkrichi @samyoungnyc I thought this was a issue, but its not. @drcmda is actually using background: #253237; as a background color. While when we copy only the code in the example, the background color is white. Hope this helps 👍

drcmda commented 7 years ago

Just got back from holidays, was about to look into it, thanks for reporting! @deadcoder0904 @neilkrichi @alanwunsche @samyoungnyc