Jump to content
Search Community

egorrr

Members
  • Posts

    3
  • Joined

  • Last visited

egorrr's Achievements

0

Reputation

  1. Thanks for links and video ?. Yep, I use axios already, basically, my HOC takes two params URL and Component, then it requests data by given URL and put result into props of the component and returns it, like so: const withFetching = (url, CurrentComponent) => class WithFetching extends Component { constructor(props) { super(props); this.state = { data: {}, isFetching: false, error: null, }; } componentDidMount() { this._fetchData(); } _fetchData() { this.setState({ isFetching: true }); axios.get(DEFAULT_API_URL + url) .then((response) => { if (response.status === 200) { return response.data; } throw new Error('Something went wrong ...'); }) .then(data => this.setState({ data, isFetching: false })) .catch(error => this.setState({ error: error.message, isFetching: false })); } render() { return ( <CurrentComponent {...this.props} {...this.state} /> ); } }; export default withFetching; I have my own backend, so the main structure of the response is the same for every component, by this reason I decided to create only one fetchData function and a HOC to wrap any component and related to it URL. But yeah probably, in this case, it's better to create just a helper function + it's much easier to test it.
  2. Hey, thanks for the quick response and detailed examples. I tried your simplification in my code and didn't have a success the animation didn't trigger at all, but in your codepen everything was OK. So I struggled a bit and released that the problem can be in my High ordered component (didn't know that it would be an important point), I had wrappers like this in my app to decrease the amount of code for fetching data: export default withFetching(URL_PATH_PERSON_DATA, About); I printed out steps of lifecycle and found in the console next order: 1) componentDidMount was triggered in About 2) componentDidMount was triggered in HOC 3) componentDidUpdate was triggered in About 4) componentDidUpdate was triggered in HOC When I removed HOC, the animation starts work I created a codepen example with this problem. Since it's my own application I can remove HOC, but for the future would like to know whether it's an issue of GSAP or React or maybe it's expected behaviour.
  3. Hi, I am pretty new in GSAP and don't have a lot of exp. in react, so I am not 100% sure what is the main cause of this problem. Problem: I am trying to do a basic show/hide DOM element animation by clicking on buttons (one in parent App component, one inside of About section) and it works almost great. I would like that About section will be out of the viewport by default but after TweenMax.set(...) I still can see About section (I don't use CSS transform for default state). I saw examples and other topics on the forum but haven't found something like that so far. I also figured out that there is a workaround: put extra conditions in componentDidUpdate() method and replace all this.aboutSection refs by "id/data attribute/class name" (see code snippet). class App extends Component { constructor() { super(); this.state = { isOpenedAbout: false } } toggleAboutSection = () => { this.setState({isOpenedAbout: !this.state.isOpenedAbout}); }; render() { return ( <div> <About isOpenedAbout={this.state.isOpenedAbout} toggleAboutSection={this.toggleAboutSection} /> </div> ) } } class About extends Component { constructor() { super(); this.aboutSection = null; } componentDidMount() { console.log('this.aboutSection', this.aboutSection); // in the browser console: <section class="about text-c-mercury-light"> TweenMax.set(this.aboutSection, {xPercent: 100}); console.log('this.aboutSection', this.aboutSection); // in the browser console: <section class="about text-c-mercury-light" style="transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);"> } componentDidUpdate(prepProps) { if (this.props.isOpenedAbout && this.props.isOpenedAbout !== prepProps.isOpenedAbout) { TweenMax.to(this.aboutSection, .8, {xPercent: 0, ease: Power4.easeInOut}); } else if (!this.props.isOpenedAbout && this.props.isOpenedAbout !== prepProps.isOpenedAbout) { TweenMax.to(this.aboutSection, .8, {xPercent: 100, ease: Power4.easeInOut}); } else { // workaround: if use id/dataAttribute/class instead of ref // TweenMax.set(this.aboutSection, {xPercent: 100}); } } clickCloseButton = () => { this.props.toggleAboutSection(); }; render() { return ( <div> <section ref={node => (this.aboutSection = node)} className="about text-c-mercury-light"> ... </section> </div> ); } };
×
×
  • Create New...