nolafs Posted October 28, 2020 Share Posted October 28, 2020 Hi, 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? Cheers Olaf Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 28, 2020 Share Posted October 28, 2020 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 More sharing options...
nolafs Posted October 28, 2020 Author Share Posted October 28, 2020 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 More sharing options...
ZachSaucier Posted October 28, 2020 Share Posted October 28, 2020 20 minutes ago, nolafs said: import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; ... import { ScrollTrigger } from 'gsap/ScrollTrigger'; Those are two different versions of ScrollTrigger - one using modules and one not using modules. Link to comment Share on other sites More sharing options...
nolafs Posted October 28, 2020 Author Share Posted October 28, 2020 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 More sharing options...
ZachSaucier Posted October 28, 2020 Share Posted October 28, 2020 Can you please create a minimal version of the issue and share it with us? Link to comment Share on other sites More sharing options...
nolafs Posted October 28, 2020 Author Share Posted October 28, 2020 Doing a demo in CodePen isn't going to work, as it seem, the issue has to do with scaffolding. I will try creating two build on Netlifly tomorrow. Different imports. Link to comment Share on other sites More sharing options...
nolafs Posted October 28, 2020 Author Share Posted October 28, 2020 Actually I might found the issue. One of my classes was importing UMD and another the module. That seemed to have caused the issue. Thanks 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now