Mapping an array for Trail throws an error about react-spring HOT 11 CLOSED

Could you dump that into a codesandbox? I’ll take a look then.

from react-spring.

Hey @drcmda, here is the code: https://codesandbox.io/s/k01ym42kor

It seems to be working. I think I need to figure out what's happening in my application. As we are just returning divs.

Would it be worth noting that we are using React 15 and not 16?

Also, if you check the codesandbox, when I set friction really low, the page flickers. Any idea why?

from react-spring.

R15 is likely the problem here. the animated library (which react-spring has forked) is closely tied to React. As for the flicker, the spring is overcharged with energy, there's no friction (something that would slow its movement down), so it springs so quick that the items bounce too fast for the framerate to handle. You can import { config } and use the defaults in there or play with the values until you find something pleasing. Friction too low isn't that useful, it's go higher until it stops bouncing. If you like it better you can now also use time-based motion, you'll find it on the main page.

from react-spring.

@drcmda Alright, thanks!

We are porting our app to R16 soon. Will let you know if we face the same issues!

As for the flicker, I was just testing it out, coz we have a tiny mini game which required physics. So was trying to use it there. Were adjusting the friction and tension based on how much you dragged a person and then let them go on different surfaces. :)

from react-spring.

@drcmda, Thanks for your hard work with this library! I find it really intuitive to use.
I just have a question about Trail and Transition. All examples use maps of some sort. How would an example look like if a raw array is used as the children of these primitives?
I can't seem to get it to work, always tells me target.map is not a function, but I make sure to return an array of functions.

from react-spring.

@ralphstodomingo

Both expect an array of functions as their children. If your state is an array already then that's easy, give it the keys

keys={this.state.data.map(item => item.key}}

and the children:

{this.state.data.map(item => props => <div style={props}>{item.text}</div>)}

Where props is the part that contains the animation values, just like in a regular spring.

If your data isn't an array but an object, it's similar, keys:

keys={Object.values(this.state.objects).map(item => item.key)}

children:

{Object.values(this.state.objects).map(item => props => <div style={props}>{item.text}</div>)}

from react-spring.

As for target.map is not a function ... this comes from Trails render function:

In other words, you didn't provide an interable array as Trails children, but something else.

from react-spring.

Thanks! I got it working for some reason when I made a separate array instead of returning an array directly in the render function/jsx.
Really intuitive, getting the hang of native keyframe animations.

from react-spring.

@ralphstodomingo good to hear! maybe console.log out the prior array for once, must be somthing very weird going on in it if it doesn't have the .map method, but good you solved it.

from react-spring.

I am also getting an error for target.map is not a function and I can't seem to figure out the issue.

@ralphstodomingo would you mind posting the code that worked for you?

from react-spring.

@joe307bad could you link a codesandbox? i can take a look ...

from react-spring.