GSAP + React [Help needed]

[mcseem7]

Hi guys! I have a trouble with loadable content filtering. Could you help me? 
Here's a video showing my trouble, and code of the files.

Vid: 

import React, { Component,Fragment } from 'react'
import './index.css'
import {Link} from 'react-router-dom'
import  gsap from 'gsap'
import ScrollMagic from "../../../scrollMagic";
import { reactTranslateChangeLanguage } from "translate-components";

 class PortolioPost extends Component {
    constructor(props) {
        super(props);


        this.state = {
            itemId: [],
            lang: ''

        };
        this.portitemTl = new gsap.timeline({paused: true});
    }

    componentDidMount() {

    }
    componentDidUpdate() {
     this.portitemTl.pause(0);
     this.portitemTl.kill();
     this.portitemTl.clear();
     let trigger = '.postitem';
     this.portitemTl
         .staggerFrom('.postitem', .3, { backgroundColor: 'transparent', opacity:0, ease: 'Power0.EaseIn'}, .15)
         .staggerFrom('.postanim', .5, {y: -180, autoAlpha: 0, opacity: 0, ease: 'Back.EaseIn'}, .25, "-=0.75");
     let controller = new ScrollMagic.Controller();
     let scene = new ScrollMagic.Scene({triggerElement: trigger, triggerHook: .6, reverse: false})
         .setTween(this.portitemTl)
         .reverse(false)
         .addTo(controller);
      const postitems = document.querySelectorAll('.postitem');
      postitems.forEach(function(item) {
      // Select the correct elements within our scope
      const heading = item.querySelectorAll('.postanim'),
      itemimg = item.querySelectorAll('.itemimg'),
      itemhead = item.querySelectorAll('.itemhead'),
      itemsubhead = item.querySelectorAll('.itemcat'),
      itemlink = item.querySelectorAll('.montelink'),
      hovertl = gsap.timeline({paused: true});
      hovertl.from(itemimg, .4, {scale: 1.1, ease: 'Power4.easeInOut', yoyo:true})
      .from(itemhead, .14, {y: 20, opacity: 0, ease: 'Back.easeIn', yoyo:true},"-=0.4" )
      .from(itemsubhead, .24, {y: 5, opacity: 0, ease: 'Back.easeIn', yoyo:true},"-=0.36")
      .from(itemlink, .24, {y: 5, opacity: 0, ease: 'Back.easeIn', yoyo:true},"-=0.36");
      item.addEventListener("mouseenter", function() {
        hovertl.play();
      });

      item.addEventListener("mouseleave", function() {
        hovertl.reverse();
      });

    });
        this.portitemTl.resume();
        console.log('Did Update', this);
    }
    render() {
    return (
<Fragment> {
  this.props.dataDside.map((item, key) => {
          return(
    <div className="grid" >
      <figure className="postitem">
                <div className="postanim">
                 <Link  to={`/${this.state.lang}/portfolio/${item.CURL}`}>
         <img className="itemimg" src={`${process.env.REACT_APP_DOMAIN}/${item.thumbnail}`}
             alt={item.name}/>
        <figcaption className="figcaption">
          <h2 className="itemhead">{item.name}</h2>
          {
            <span className="itemcat">{item.category.name}</span>
        }

        </figcaption>
            </Link>
            </div>

<noindex><a href={item.projectlink} className="montelink" rel="nofollow" target="_blank">{item.projectlink}</a></noindex>
      </figure>

    </div>
            )
  })
}

</Fragment>
    )
  }

}

export default  PortolioPost

At portfolio page:

import React, { Component, Fragment } from 'react'
import './index.css'
import Helmet from 'react-helmet-async'
import withDsideApi from "../../../HOC/Fetch";
import withLanguage from "../../../HOC/withLanguage";
import CategoryItem from './CategoryItem';
import PortolioPost from '../Header__Post/Portfolio__Post';
import gsap from 'gsap'
import Arrow  from '../../Basic/Footer/arrow.svg';
import Ad  from '../Main/About__block/chess.png';
import Translate, { reactTranslateChangeLanguage } from "translate-components";
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import Footer from '../../Basic/Footer';


class Portfolio extends Component {
  constructor(props) {
    super(props)

    this.state = {
      dataItems: [],
      dataItemsStatic: [],
      activeFilter: null,
      category: null,
    }
  }

  async componentDidMount() {
   window.scrollTo(0, 0);
      return await fetch(`${process.env.REACT_APP_API}/${this.props.language}/portfolio/getPortfolioItems/`).then((response) => {
      return response.json()
    }).then((items) => {
         this.setState({dataItems: items});
         this.setState({dataItemsStatic: items})
    })
  }

  setFilteringCategory = async (selectFilterId, category) => {
      await this.setState({
        activeFilter: selectFilterId,
        category: category
      });
      await this.getCategoryData();
  }

  setFilteringCategoryNull = async (selectFilterId, category) => {
      await this.setState({
        activeFilter: selectFilterId,
        category: category
      });
      await this.getCategoryDataNull();
  }
 isActiveCategory = (id) => {
   return this.state.activeFilter == id
 }
 getCategoryData = () => {
    return fetch(`${process.env.REACT_APP_API}/${this.props.language}/portfolio/getPortfolioItems/${this.state.category.tag}/`).then((response) => {
       return response.json()
     }).then((items) => {
          this.setState({dataItems: items})
     })
 }
 getCategoryDataNull = () => {
    return fetch(`${process.env.REACT_APP_API}/${this.props.language}/portfolio/getPortfolioItems/`).then((response) => {
       return response.json()
     }).then((items) => {
          this.setState({dataItems: items})
     })
 }

componentDidUpdate(){
   console.log('LOL', this.state);
 }

 render() {

    return (
      <Fragment>
        
      <div>
        <section className="portfolio__items-category">
          <Helmet>
            <title>Dside Portfolio</title>
          </Helmet>
        <div className="wrapper-row">
        <h2><Translate>We'll make it best. They have already tried it.</Translate></h2>
          <div className="sorting__items-container">

            <div className="sorting__items-left">

              <div className="sortby__category">

                <ul className="portfolio-category__list">

               <li class="portfolio-category__item" onClick={this.setFilteringCategoryNull}><p class=""><Translate>Everything</Translate><sup>({this.state.dataItemsStatic.length})</sup></p></li>
    {this.props.dataDside.map((category, index) => {
                    return (
                  <CategoryItem
                  key={index}
                  {...this.state} 
                  category={category}
                  isActiveCategory={this.isActiveCategory(index)}
                  onActiveFilteringCategory={this.setFilteringCategory.bind(this,index, category)} 
                  {...this.props}/>

                  )
                })}
                </ul>

              </div>

            </div>
            <div className="sorting__items-right">
              <div className="sortby__type">
                <div className="portfolio-sort__title"><Translate>Sort by:</Translate></div>

                <div className="sorting-portfolio__wrapper">
                  {/* <div className="portfolio-sorting__date">Date</div> */}

                  <div className="portfolio-sorting__date"><Translate>Category</Translate></div>
                </div>
              </div>
            </div>
</div>
          </div>
          <div className="portfolio__items-container">
              {this.props.loading ? (
                <PortolioPost {...this.props} dataDside={this.state.dataItems} />
              ) : null}
          </div>
           <div className="advantages">
             <div className="advantage-item right">
                        <div className="advitem-image-holder small rodrigo">
                            <img src={Ad} width={460} className="a2"/>

                        </div>
                        <div className="advitem-inner right">
                            <div className="adv-heading a2">Понравились наши работы?</div>
                            <div className="adv-text a2">Самое время рассчитать приблизительную стоимость Вашего проекта. Для рассчета точной стоимости, пожалуйста, оставьте заявку через форму "Заказать", либо при помощи калькулятора цен.</div>
                            <div className="adv-btn a2">Рассчитать<img src={Arrow} width={16} alt=""/></div>
                        </div>
                    </div>
           </div>
        </section>
        <Footer/>
      </div>
      </Fragment>
    )
  }
}

export default withLanguage(withDsideApi(Portfolio, '/portfolio/getAllCategories/', null))

And of "design" page, where it works properly:
 

import React, {Fragment} from 'react'
import './index.css'
import Translate from "translate-components";
import PortolioPost from "../../../../DynamicContent/Header__Post/Portfolio__Post";

function CaseService(props) {
    return(
        <Fragment>
                <div id='case__wrapper' style={{background: '#fff'}}>
                <div className="container__case-studies">
                    <div className="row">
                    <div className="case-title">
                      <h3><Translate>Case Studies</Translate></h3>
                    </div>
                    <div className="case-description">
                        <p><Translate>Evaluate our previous experience in</Translate> <Translate>{props.name}</Translate>. <Translate>Each case in our portfolio perfectly shows the way we work.</Translate></p>
                    </div>
                </div></div>
                <div className="case__service">
                    <section className="portfolio__posts">
          <div className="relative__content">
            <div className="content__posts">
                      {props.loading ? (
                <PortolioPost {...props} />
              ) : null}
                </div></div></section>
                </div>
                </div>
        </Fragment>
      
    )

}

export default CaseService;

The main problem is that I don't understand why it works improperly ?

[ZachSaucier]

Hey mcseem7 and welcome to the GreenSock forums! Thanks for being a Club GreenSock member.

 

There's a lot going on in your demo. I think it would help you, and help us in helping you, if you reduced down the example to only the minimum to recreate the error. That means stripping away all other elements, CSS, JS, and maybe even not using React itself that is not strictly necessary to figure out exactly what's going on. 

 

This thread can help you setup a demo like that:

 

[mcseem7]

Unfortunately, I can't create a codepen :c

[ZachSaucier]

5 minutes ago, mcseem7 said:

Unfortunately, I can't create a codepen :c

Why is that?

[mcseem7]

1 minute ago, ZachSaucier said:

Why is that?

Because that code doesn't work separately from the whole project, and project is big :c also it uses Django API to get data for portfolio items, and there's no way to add codepen domain to get data.

[ZachSaucier]

1 minute ago, mcseem7 said:

Because that code doesn't work separately from the whole project, and project is big :c also it uses Django API to get data for portfolio items, and there's no way to add codepen domain to get data.

That functionality is completely separate from the way it's displayed  You just have to recreate the part that is supposed to reveal it. The content doesn't have to use any APIs at all, it can be completely static.

[mcseem7]

Just now, ZachSaucier said:

That functionality is completely separate from the way it's displayed  You just have to recreate the part that is supposed to reveal it. The content doesn't have to use any APIs at all.

ok, i'll try to get all the project to codepen

[mcseem7]

Or just to reproduce the error

 

[mcseem7]

33 minutes ago, ZachSaucier said:

That functionality is completely separate from the way it's displayed  You just have to recreate the part that is supposed to reveal it. The content doesn't have to use any APIs at all, it can be completely static.

No, i can't :c it does not work at all.

[ZachSaucier]

Surely the console gives you an error other than "it does not work at all". Fix those errors