Jim's
Tutorials

I had a ton of problems getting one image to fade onto another and had to read this stackoverflow conversation about revealing a react component which suggested componentDidmount and binding the picture to the browser. This was the first thing I read on the subject though, and I didn't know what componentDidmount was at the time so I went in circles reading about possible other css solutions before returning back to this as the best possible answer in regards to the architecture I was trying to keep with my code. Since there are a million ways to do any one thing I've come to the conclusion that it's all a matter of staying somewhat consistent so your components and file structures look somewhat the same. so that was the approach I took here since there were a lot of options. read this same kind of article about it, tried reading the code sandbox of someone with an onscroll function, returned back to reading stackoverflow about onscroll functions then finally realized that componentDidmount must be the answer and so had to read about it here.

import React from 'react';
import Fade from 'react-reveal/Fade';
import vectorlines2 from '../../images/vectorlines2.svg';




class Fadein extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        show: false
    };

    this.handleScroll = this.handleScroll.bind(this);
  }

  componentDidMount() {
            window.addEventListener('scroll', this.handleScroll)
        };

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


  handleScroll() {
    this.setState({ show: true});
  }
  render() {
    return (
      <div className='vectorlines2'>

        <Fade when={this.state.show} className='Fade'>

<img src ={vectorlines2} onScroll= {this.handleScroll}></img>
 </Fade>
      </div>
        );
      }
    }

    export default Fadein;

I then started wondering how to get cloud effects like those in this website and read about magic leap software and asked jim about it. Even though it will be a distraction, after I got the fadein to work my mind started going crazy with the possibilities I had with my newfound styling prowess. I started reading about 3d imagingthinking it would make my website look cooler and realized that was a dead end. I am going to do more research into the way magic leap makes those cool cloud effects though and have some reading to do about it.