Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kingsley88

Implementing Giaco's Page Slider (GSAP) in React

Recommended Posts

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.

Link to comment
Share on other sites

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 ?

 

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×