Anooj Mathew

Yes. Thank you so much for your help. Learnt something very important here. Hope this thread help someone in future.

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.

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.

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.