ERROR in ./node_modules/animated/lib/targets/react-dom.js
Module not found: Error: Can't resolve 'react-dom/lib/CSSPropertyOperations'

react-spring-parallax: 1.1.0
react: 16.0.0
react-dom: 16.0.0

I appreciate your work on the package and any insight you can give me.

Thanks!

I would love to extend this, check in on the issues, etc. But my job is keeping me too busy often. I would be glad to share the rights to this.

The last page of my app needs to be longer than the screen size. Is it possible to achieve this?

Suggest to add one option to make layer can move from left or right when scroll in vertical.

Hi, love this, I'm just getting started out with react and I'm not sure how to use this with this.refs.parallax.scrollTo

Do I need to add it into the constructor?

I have just used the example code with some light editing

So, how do I use it?

Do I need to do it with a stateless function?

Thanks again

Is this available to see anywhere? Trying to understand how to use multi-layers. That would be great if so :)

Hello!
I am getting
TypeError: Cannot read property 'clientHeight' of undefined
this error when I try to go to other route using zeit/next.
any hint how to fix this?
Thanks.

Hi!
I've found one specific issue.
Once any added to parallax layer link is clicked - the scroll to next layer is engaged. Right now I'm implementing modal-dialog which is accessed through links. So app behaves in such way:

• click on link
• the layer shifts and background colour is shown (related to fist page) | the layer is shifted to next one(non first layer)
• modal is shown, but the page is reloads! Seems that this behaviour related also to first slide

How could it be fixed? Could the behaviour of internal links changed to ignore scroll action?

The effect looks really great when using the touchpad or grabbing the scrollbar with my mouse, but when I scroll with a mouse wheel the parallax is very jerky.

@drcmda Can you share the code used here if you don't mind ?

Good work on this nice little library. Would it be possible for you to make the demo app open source? I would like to see how the layers are arranged in the demo app http://react-springy-parallax.surge.sh

Layers content completely disappears being rendered on a server :-( It comes to a client as an empty div. Next, on a client everything is fine.

Is there any way to let search engines to index layers content?

There's an error when I try to run the example in a default create-react-app. This may be due because of create-react-app, I didn't try it yet. However, so many people are using create-react-app and I thought that it might be fixed.

Error:

Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

Reproduce:

Installation

create-react-app example2
cd example2

npm i react-springy-parallax -S

# edit App.js
# to add code from your example/index.js (like below)

npm start

create-react-app App.js

import React, { Component } from 'react';
import './App.css';

import Parallax from 'react-springy-parallax';

const styles = {
  fontFamily: 'Menlo-Regular, Menlo, monospace',
  fontSize: 14,
  lineHeight: '10px',
  color: 'white',
  display: 'flex', alignItems: 'center', justifyContent: 'center'
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <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>
      </div>
    );
  }
}

export default App;

I have the following structure for my code:

<Parallax>
  <div className="wrapper">
    <Parallax.Layer>...</Parallax.Layer>
    <Parallax.Layer>...</Parallax.Layer>
    <Parallax.Layer>...</Parallax.Layer>
  </div>
</Parallax>

The div with class wrapper has a width property, but inside Parallax it doesn't work. I have set width: 85vw, but it's not working. What should I do to get it to work?

Does this work with react-native

I can't use className in Parallax.layer.
I guess this is because it doesn't have className property.
Please let me know if I am wrong.

Thanks

Hey,

Using react-springy-parallax works great most of the time on desktop. However, on mobile much of the content in the parallax is cutoff. Any suggestions for using this on mobile?

I have a separate menu component and want to add "onClick={() => this.parallax.scrollTo(1)}" on some of my menu items to scroll parallax content.

Is there a way to do this?

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

Can the parallaxes be set to be side by side and to be moved from left to right(& viceversa) on clicks(/ horizontal scroll)?

Runs okay in dev, breaks with next build

{ [Error: ./~/react-springy-parallax/~/animated/lib/targets/react-dom.js
Module not found: Error: Can't resolve 'react-dom/lib/CSSPropertyOperations' in '/home/ubuntu/deemx/node_modules/react-springy-parallax/node_modules/animated/lib/targets'

can this error be solved with a simple workaround ?

Hi!
Could you please explain more about how to use animation with you library?
In you sample:

<img
     src={url('server')}
     style={{ width: '20%', transform: [{ scale: this.animation }] }}
   />

is this.animation pre-difined value?
How different animations could be used? such as bounce-in, rotation, spin?
I've tried this:

style={{
          transform: [{rotate: spin}] }}

But spin is undefined.

Thank you very much
P.S. I've glanced at http://browniefed.com/react-native-animation-book/ but it looks like more advanced examples