How to properly animate using CSS in React

Question

I'm creating a side-project website for myself using React to get a better understanding of it. I'm trying to animate a div to fade in when the user scrolls to its position. I've successfully worked the on-scroll event to trigger a function which changes the class name of the div (according to my understanding this should trigger the transition in opacity). However, this doesn't work; instead this leads to a display of only the text within the div, with no animation what so ever. I'm sure I'm doing something wrong with the way I'm setting the class name of the div but not sure what, here is the code:

class Home extends React.Component{
  constructor(){
    super()
    this.state = {
      name: "WhatIdo",
      firstTransitionPosition: 0
    }
    this.handleScroll = this.checkForScroll.bind(this)
    this.hasBeenSet = false
  }

  checkForScroll() {
    if (window.scrollY >= this.state.firstTransitionPosition && this.hasBeenSet == false) {
      console.log("this event is triggering")
      this.setState({name: "WhatIdo--visible"})
      this.hasBeenSet = true
    }
  }

  componentDidMount(){
    var transitionComp = this.refs.moveMe
    var topOfElement = transitionComp.getBoundingClientRect().top
    var heightOfElement = transitionComp.getBoundingClientRect().height
    this.setState({firstTransitionPosition: topOfElement - heightOfElement})
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount(){
       window.removeEventListener('scroll', this.handleScroll);
  }


  render(){
    return(
      <div>
        <h1 className="PageTitle">Portfolio</h1>
        <div className="AboutMe">
          some stuff here
        </div>
        <div ref="moveMe" className={this.state.name}>
          some more random stuff
        </div>
      </div>
    )
  }
}

And the CSS:

.AboutMe {
  border-style: solid;
  border-color: black;
  border-width: thick;
  width: 600px;
  height: 300px;
  position: relative;
  left: 365px;
  bottom: 300px;
  -moz-animation: fadein 2s;
}

@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 2; }
}

.WhatIdo {
  border-style: solid;
  border-color: black;
  border-width: thick;
  width: 600px;
  height: 300px;
  position: relative;
  left: 365px;
  bottom: 100px;
  opacity: 0;
  transition: opacity 2s;
}

.WhatIdo--visible {
  opacity: 1
}

Thanks in advance for the help!

Opacity doesn't take numbers higher than 1. It's a "percentage" value from 0 to 1 (0.5 for 50%, for example) — Simon
– Simon, Commented Jul 21, 2017 at 17:34
@SimonNußbaumer thanks for noticing that! I've fixed that up. The main error in the display still persists though. — hyper0009
– hyper0009, Commented Jul 21, 2017 at 17:39

jered · Accepted Answer · 2017-07-21 18:22:51Z

1

Unless I'm missing something... when you change this.state.name from WhatIdo to WhatIdo--visible you're losing all the styles of the WhatIdo class, including the transition property, which causes it to just pop in.

Find a way to specify that the element should be visible in addition to retaining its normal styles. For instance, you could simply add the visible class to the element, and have the CSS definition be .WhatIdo.visible so that it overrides the others.

One way (out of many) would be to use a template string and modify your state to simply specify whether the element visibility is true or false, making it a bit more abstract and flexible with how you respond to state changes:

    <div ref="moveMe" className={`WhatIdo ${this.state.isVisible ? "visible" : ""}`}>
      some more random stuff
    </div>

answered Jul 21, 2017 at 18:22

jered

11.6k2 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hyper0009 Over a year ago

Thank you so much for your answer, this works perfectly; Ive added an isVisible property to state which is set to true or false based on the scroll position and then applied the rest of your answer which works a treat. marked as correct answer :)

Collectives™ on Stack Overflow

How to properly animate using CSS in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related