0

I am new to React and learning how to animate styles. I have created the following animation that moves the element down 50px when the page renders. The props from, to, and config are part of the react-spring library. 

import React, { Component } from 'react';
import sphere from '../img/sphere.png';
import { Spring, config } from 'react-spring'
import '../Sphere.css';

class BioSphere extends Component {
  state = { top: 0 }
  render() {

    const float = (num) => {
      if(num == 0) {
        return 50;
        this.setState({
          top: 50
        })
      } else {
        return 0;
      }
    };
    return(
      <div style={this.props} className="sphere">
        <Spring
          from = {{top: '0px'}}
          to = {{top: `${float(this.state.top)}px`}}
          config = {config.slow} >
          {props => (
            <div style={props}>
              <img style={props} className='img' src={sphere} alt={' '}/>
            </div>
          )}
        </Spring>
      </div>
    );
  }
}

export default BioSphere;
LarryYoung
  • 25
  • 7

1 Answers1

1

Try creating a function that runs a conditional.

const conditional = (b,n1,n2) => b?n1:n2;

conditional(somebool,'0px','50px')
bronkula
  • 633
  • 5
  • 12
  • Good idea, I will let you know how it goes – LarryYoung Feb 06 '19 at 22:52
  • The conditional worked. I'm able to set the top property using a template literal and a function that runs a conditional and returns the number.. However I still need a way to implement a callback function or something to check the condition over and over and move the element back up and down again. I will update the code in the original post to reflect the changes i made. The problem seems to be that state that is passed down by props is read-only so i cannot simply pass the state and change it based on the conditional. – LarryYoung Feb 06 '19 at 23:25