Jump to content
GreenSock

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

mcseem7

Members
  • Posts

    6
  • Joined

  • Last visited

mcseem7's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges

0

Reputation

  1. No, i can't :c it does not work at all.
  2. Or just to reproduce the error
  3. ok, i'll try to get all the project to codepen
  4. 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.
  5. Unfortunately, I can't create a codepen :c
  6. 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 🤔
×