React-motion: Translate Y Animation Doesn't Work Transition Motion

[pizzarob]

Can't figure out how to animate translateY. When replacing the value with top it works fine.

    willEnter = () => {
        return {
            translateY: 100
        };
    }
    render() {
        const boxAttrs = {
            className: 'col-xs-12 col-md-4 intro-box',
        };
        return (
            <div className="intro">
                    <TransitionMotion
                        willEnter={this.willEnter}
                        styles={this.props.items.map(item => ({
                            key: item.key,
                            style: { translateY: spring(0) }
                        }))}>
                        {interpolatedStyles =>
                        <div className="row">
                            {interpolatedStyles.map(config => {
                                return <div {...boxAttrs} key={config.key} style={{...config.style}} />
                            })}
                        </div>
                        }
                    </TransitionMotion>
            </div>
        );
    }

[chenglou]

Check the value in the DOM. translateY, for a react style, needs to be a string, right? {transform: 'translateY(' + config.translateY + 'px)'}

Hope that solves it!

[ticruz38]

I do have the same problem, none of the transform property are supported

style: { transform: `translateX( ${spring(0)}px )`}

this give me an invalid styles supplied to TransitionMotion, though it's valid react style props

[mhaagens]

In case anyone else didn't really get it the first time (like me 😄 ) you need to declare the styles explicitly inside your interpolatedStyles not in your styles object on the TransitionMotion component. Like this;

 <div className="page"
 key={config.key}
 style={{opacity: `${config.style.opacity}`, transform: `translateY(${config.style.translateY}px)`}}>

[ticruz38]

Sure! but still the transform property doesn't apply, I had to use a left property and positioning my element absolutely in order to get the animation I wanted...

[mhaagens]

Here's how I use it for route transitions with translateX;
https://gist.github.com/mhaagens/61f88e3fbfddbe2c00708f3ebd099be4

[eemebarbe]

You have to use their transforms method:

https://facebook.github.io/react-native/docs/transforms.html