GSAP with React.js

Question

I encounter this problem. I use GSAP in react project to do some complicated animation. I want to ask that how can I clear the style applied on the DOM whenever the component re-render. It still keeps the old state which is the tl.reverse(). I set it it to Null again and re-define but i doesnt work. I'm also new to react. Below is code. Hope anyone can help

componentDidMount () {
    this.menu_init()
    this.cta_animation_init()
    // this.cta_animation_active()
    this.hover_effect()
    $(window).on('scroll', function () {
        var t = $(window).scrollTop()

        if ((t > 0 && self.state.currentPos < t) || (t > self.state.min_height && self.state.currentPos > t) || $(window).width() <= 1020) {
            self.menu_scroll()
        } else {
            self.menu_scrolling()
        }
        self.state.currentPos = t
    })
}
componentWillUnmount()
{
}

menu_init () {
    const tl = new TimelineMax({paused: true});
    tl.to('.top-nav', 0.3, {y: '-165px', ease: Power0.easeNone})
        .to('.burger-nav-bg, .burger-nav-button', 0.1, {opacity: 1, scale: 1}, '-=.3')
        .staggerTo('.burger-nav-bar', 0.1, {left: '13px'}, '-=.1')
    this.setState({tl:tl})
}

menu_scroll () {
    this.state.tl.play()
}

menu_scrolling () {
    this.state.tl.reverse()
}

score 0 · Answer 1 · answered Jan 25 '18 at 18:43

You should read a bit about react before using it

https://reactjs.org/tutorial/tutorial.html#what-is-react

but answering your question, first you don't need to use jquery

How to add scroll event in react component

this.state should only contain "state" the state of the view, things that are used in the render function, everytime you call setState the view will be re-rendered so you can use setState to change the style, in your case looks like you need to change the style based on timeLineMax, you should grab the value that you wanna change from timeLineMax and use setState of this particular value you shouldn't save tl on the state.

just one more thing javascript uses camelCase for functions not snake_case

http://www.j-io.org/Javascript-Naming_Conventions

I think the comment discouraging a beginner is unnecessary. Accessing DOM elements in React is not a straightforward thing. — Maiya, Aug 17 '19 at 18:01

score 0 · Answer 2 · answered Mar 12 '21 at 01:55

0

If someone is looking to do something like this today, with GSAP 3 and state hooks, here is a working example on github:

https://github.com/npinos/cloud-animations-react-gsap

answered Mar 12 '21 at 01:55

Nicolas Pinos

137
3

GSAP with React.js

2 Answers2

Linked