mcseem7
Members-
Posts
6 -
Joined
-
Last visited
mcseem7's Achievements
Recent Badges
0
Reputation
-
No, i can't :c it does not work at all.
-
Or just to reproduce the error
-
ok, i'll try to get all the project to codepen
-
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.
-
Unfortunately, I can't create a codepen :c
-
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 ?