GSAP with React.js | 易学教程

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/48441044/gsap-with-react-js

标签

javascript

reactjs

gsap

tweenmax

timelinemax