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>
);
}
};