# React-motion not updating state onScroll

**URL:** <https://forum.kirupa.com/t/react-motion-not-updating-state-onscroll/636503>\
**Category:** programming\
**Created:** [April 26, 2017, 6:04pm UTC](https://forum.kirupa.com/t/react-motion-not-updating-state-onscroll/636503 "2017-04-26T18:04:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![A7DC](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/a7dc/32/8413_2.png) [@A7DC](https://forum.kirupa.com/u/A7DC)\
**Post date:** [April 26, 2017, 6:04pm UTC](https://forum.kirupa.com/t/react-motion-not-updating-state-onscroll/636503/1 "2017-04-26T18:04:29Z")

</div>

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](http://codepen.io/A7DC/pen/jmVJdd) to the Codepen

[Link](https://www.kirupa.com/react/smooth_sliding_menu_react_motion.htm) to the Kirupa post I’ve been following to do the react-motion stuff

---

<div class="post-metadata">

**Author:** ![A7DC](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/a7dc/32/8413_2.png) [@A7DC](https://forum.kirupa.com/u/A7DC)\
**Post date:** [April 26, 2017, 6:06pm UTC](https://forum.kirupa.com/t/react-motion-not-updating-state-onscroll/636503/2 "2017-04-26T18:06:34Z")

</div>

[Here’s the link](http://stackoverflow.com/questions/43640979/react-motion-not-updating-state-onscroll) to the StackOverflow post if anyone’s interested.

---

<div class="post-metadata">

**Author:** ![A7DC](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/a7dc/32/8413_2.png) [@A7DC](https://forum.kirupa.com/u/A7DC)\
**Post date:** [April 26, 2017, 8:41pm UTC](https://forum.kirupa.com/t/react-motion-not-updating-state-onscroll/636503/3 "2017-04-26T20:41:09Z")

</div>

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](http://codepen.io/A7DC/pen/jmVJdd)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 27, 2017, 12:26am UTC](https://forum.kirupa.com/t/react-motion-not-updating-state-onscroll/636503/4 "2017-04-27T00:26:27Z")

</div>

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? 🙂 )

Cheers,  
Kirupa