[React, Next.js and GSAP issues - possible fixes for SSR]

Yes. Thank you so much for your help.

 

Learnt something very important here.

Hope this thread help someone in future.

 

[React, Next.js and GSAP issues - possible fixes for SSR]

Hi. The issue is due to tree shaking. CSSpulgin is considered as dead code.

 

And there is no option in webpack/next config to disable this (other than changing optimization)

 

What if I import the CSSplugin from gsap/dist file to the code like

Import 'gsap/dist/CSSplugin'

Will this solve it. I am yet to try.

 

[React, Next.js and GSAP issues - possible fixes for SSR]

Hi, Thank you for the advice. 

 

But its still a no go. the tween is working perfectly fine in dev mode of nextjs(using custom server hapi). However once build and run in production, the animation stops. I even tried doing the same using REACT TRANSITION.

 

<Transition
        mountOnEnter
        unmountOnExit
        in={true}
        addEndListener={(node, done) => {
            this.myTween.to(node, 1, {x: -600},"+=2")
                .to(node, 1, {x: -1200},"+=2")
                .to(node, 1, {x: -1800},"+=2")
                .to(node, 1, {x: -2400},"+=2")
        }}>
    <div className="d-flex flex-row">
{
    this.images.map((data,index) => {
        return(
                <img key={index} src={data.uri}/>
        )
    })
}
    </div>
    </Transition>

Works fine in dev, but in production no style being added.

 

@gogo125 How did you fix this issue. 

 

[React, Next.js and GSAP issues - possible fixes for SSR]

Hi Guys,

 

Thanks for the help.

I was able to run the gsap in nextjs dev mode successfully. However in production i am receiving this error

 

Uncaught TypeError: Cannot assign to read only property 'x' of object '#<HTMLImageElement>'

 

 

code..

 

componentDidMount(){
    console.log(this.imgSlider)
    this.myTween.to(this.imgSlider, 1, {x: -600},"+=2")
        .to(this.imgSlider, 1, {x: -1200},"+=2")
        .to(this.imgSlider, 1, {x: -1800},"+=2")
}

<div className="col">
    <div className="testimonials-img-wrapper" >
        {
            this.images.map((data,index) => {
                return(
                    <img key={index} ref={img => this.imgSlider[index] = img} src={data.uri} alt=""/>)
            })
        }


    </div>
</div>

 

i even tried wrapping img tag with div and having the reference shifted to the div.

The error is now gone but the tween is not working.