Jim's
Tutorials

I'm trying to record my thoughts earlier on after making changes to the website so here goes.

I worked on this Fade component, changeing it into this

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;

...FROM THIS

insert origional fade code here

I did this because I used a material ui fade in-out effect that was activated with a button. But since my fadeins gonna happen onload, not with a button click, had to change this functionality. used a componentDidMount and binded it to the browser window and used an Unmount function as well, (have never done either of those things before) because if I didin't, the fade would have stuck on as an effect into the next pages. I made a handlescroll function that would activate all this fading action to happen when someone started scrolling down. Origionally in this part

handleScroll() {
    this.setState({ show: true});
  }

the handlescroll was show: !==false, which interestingly enough made it so the fade toggled from happening to not happening each time I touched the mouspad. So this made it toggle. Had to figure out that show needed to be set to true to make it remain there after one fade effect. That was pretty interesting.

this fadin works fine, now i need to get the properly sized pictures.

My next task is to get that flying into the sky ffect, I'm trying to decide if i want to fade from picture to picture that increasingly zooms into the picture and up into the 'sky' or if i can experinemnt with using something like magic leaps effects however those are rendered to get cool cloud effects, or if i need to make part of my colorforest image a gif that is moving as it is zooming in to give an optical illusion of movement into the sky, so this crap is getting complicated now...

I"m going to step away from that for a moment as I reserac and focus on getting the other gridlist categories (the sets of 3) under my first set of 6. So I'll be making more gridlists today.

after that I'm going to arrange the slider text and pictures so it actually s hows up as a webpage.

I can also make the navbar look the way I need it to look, although I'm still not sure at what point I want it to show up after the fadins (at what component? certainly by the gridlist but maybe before) I need to talk to larisa about what she envisions.