Implementing Giaco's Page Slider (GSAP) in React

[Bratua]

Hello everyone at GSAP. Thanks for the great ongoing job. For the past day or two, I've been trying to implement GIaco's full page slider on my react website. This is the link to the original on codepen - 

See the Pen dopxrV by MAW (@MAW) on CodePen

What I am trying to do is achieve the exact same thing but with react. So far I have not been able to get anything to work especially because some of the line of code in the codepen example above don't make much sense to me when trying to implement them in react.

 

This is what I have so far - 

import React, { Component } from 'react';
import { TweenMax, TimelineMax, ScrollToPlugin, CSSPlugin, Expo } from 'gsap/all';
import ReactPageScroller from "react-page-scroller";


import '../../styles/components/home.scss';

import Nav from '../nav/Nav';




const plugins = [ CSSPlugin ];

class Home extends Component {

  state = {
    slides: [],
    animating: true
  }

  constructor(props) {
    super(props);
    this.Go = this.Go.bind(this)
  }

  componentWillMount() {
    const slide = this.state.slides;
    const indx = slide.length - 1;
    const Anim = this.state.animating;

    for(var i = slide.length; i--;) {
      slide[i].anim = TweenMax.to(slide[i], 0.7, { yPercent: -100, paused: true });
    }

    document.addEventListener("wheel", this.Go);
  }

  Go(e){
  	var SD=isNaN(e)?e.wheelDelta||-e.detail:e;
  	if(SD>0 && indx>0 ){
  		if(!Anim){Anim=slide[indx].anim.play();  indx--;}
  	}else if(SD<0 && indx<box.length-1){
  		if(!Anim||!Anim.isActive()){indx++;  Anim=box[indx].anim.reverse();}
  	};
  	if(isNaN(e))e.preventDefault();
  };

  render() {

    return (
      <div className="home">
        <Nav />
        <div className="slide" ref={(slide) => { this.state.slides.push(slide) }}>1</div>
        <div className="slide" ref={(slide) => { this.state.slides.push(slide) }}>2</div>
        <div className="slide" ref={(slide) => { this.state.slides.push(slide) }}>3</div>
      </div>
    );
  }
}

export default Home;

Please, if anyone could spare the time in this busy festive period to help me out, I would be ecstatic. Thanks all and Merry Christmas.

[OSUblake]

6 hours ago, Kingsley88 said:

What I am trying to do is achieve the exact same thing but with react. So far I have not been able to get anything to work especially because some of the line of code in the codepen example above don't make much sense to me when trying to implement them in react.

 

He intentionally makes his code hard read. You should probably clean it up so you can make better sense of what's going on. Go line by line, and console.log every single value out.

 

I can already tell you that you got Anim wrong. A true/false value never gets set on it. Anim is also inaccessible in your Go method.

 

state = {
  animating: true
}

componentWillMount() {
  const Anim = this.state.animating;
}

 

 

If you need more help ?