React-motion not updating state onScroll

programming
1

Hi everyone,

First of all, I just wanted to say thanks to Kirupa for the fantastic book ‘Learning React’ - easily the best programming book I’ve ever read. He does a great job at explaining concepts in a way that’s easy to understand. The book has been a pleasure to read!

Anyway, I’m experimenting with react-motion and trying to get it working with a Header component that I’m building.

While I’ve been able to change the state of my component using onScroll (all working fine) for some reason it’s not letting me update the transform: translateY property.

Here’s the render method:

  render() {
    var { Motion, spring } = ReactMotion;
    var headerStyles = "pl2 pt4 pb3 flex flex-column bg-white w-100 mb4";

    return (
      <Motion style={{y: spring(this.headerIsSticky ? -100 : 0)}}>
        {
          ({y}) => {
            return (
               <header className={headerStyles} onScroll={this.handleScroll} style={{ transform: "translateY(" + y + ")" }}>
                Hello world
              </header>
            );
          }
        }
      </Motion>
    );
      }

Could anyone please shed some light on what I’m doing wrong? Thanks!

Link to the Codepen

Link to the Kirupa post I’ve been following to do the react-motion stuff

2

Here’s the link to the StackOverflow post if anyone’s interested.

3

This was a silly oversight on my part.

I wasn’t referencing the state correctly, forgot to add the “px” for the transform property, and had the header hiding itself when handleScroll function was called!

Working code (not styled) if anyone’s interested: http://codepen.io/A7DC/pen/jmVJdd

4

Glad you got it figured out! Not putting “px” is one of those minor things that has wasted a bunch of my time as well haha. I went to your codepen, but I am not seeing any animation play (in Chrome Canary). What should I be looking out for?

(Also, thanks for the nice comments about the book! Glad you liked it. If you don’t mind, can you please take a few moments to write a short review for it on Amazon? :slight_smile: )

Cheers,
Kirupa