Jump to content
Search Community

Webpack production build very very slow

nolafs test
Moderator Tag

Recommended Posts



I am having issues with production builds using ScrollTrigger. The animation is smooth as butter under development build but when all minimised it is choppy and unusable. The site uses a couple of angular web-component which compile their own version of ScrollTrigger which seem to work fine. Something seem to go wrong when minifying and combining the page js files.


It beats me why Angular production compile doesn't have the problem. Anything tricks I might missed when setting up my webpack production build?




Link to comment
Share on other sites

Hey Olaf. This sounds like an issue with your environment or in webpack. I encourage you to start from nothing and include the bare minimum in your webpack build and then see if the issue still exists. If it does, then contact whoever maintains webpack about the issue. If it doesn't, then it's something with your build and you'll need to debug and figure out whatever it is. 


If you find that it's an issue in GSAP/ScrollTrigger please let us know but I'm betting it's not. 

Link to comment
Share on other sites

Yeah, I start turning off some stuff including the smooth scroller. That did improve the animation but it still not 100% smooth and jumpy at times. It seems to perform just a bit better in Safari too. Very frustrating, spend days on my local build to optimise the animation and now the production build just won't work.  


On thing I did notice, when I import


import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';


I get good performance on my development but 



import { ScrollTrigger } from 'gsap/ScrollTrigger';


Impossible jumpy and choppy animation but on my Angular webcomponent, complete the other way around. 


Link to comment
Share on other sites

As I am using webpack, the modules should be the correct import but it behaves terrible. Is seems it is unable to update when scrolling. It is jumpy and choppy.  The animation is super simple. 



  gsap.utils.toArray(".parallax").forEach(layer => {
   const tl = gsap.timeline({
    scrollTrigger: {
     trigger: layer,
     start: "top top",
     end: "bottom top",
     scrub: true,
     markers: false

   const depth = layer.dataset.depth;
   const movement = -(layer.offsetHeight * depth)
   tl.to($(layer).find('.imageWrapper'), {y: movement, ease: "none"}, 0)


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...