Hello,
I have this strange issue with scrollto animation that freezes really bad the first time it's executed, but after that - everything works smoothly.
The native scroll on the body is disabled (with overflow hidden) and on user scroll, I'm triggering the scrollto animation to the next section. The staging page is here: http://your-agency-staging.livewell.in.ua/ (the issue is present when you first load the page and scroll on the home page to next section). After that initial scroll, the next navigation looks much smoother.
Anyone can help me to debug this?
The class method that triggers the scroll is:
goToSlide(slideIndex) {
//If the slides are not changing and there isn't such a slide
let $slide = $($(this.slides).get(slideIndex));
if (!this.isAnimating && $slide.length) {
//setting animating flag to true
this.isAnimating = true;
//Sliding to current slide
TweenMax.to(window, 1.25, {
scrollTo: {
y: $slide.offset().top,
autoKill: true,
force3D: true,
},
onComplete: this.onSlideChangeEnd,
onCompleteParams: [slideIndex],
onCompleteScope: this,
ease: Power3.easeOut,
});
}
}
The scroll callback is throttled with lodash/throttle:
// event listerner for scroll
const onMouseWheel = this.onMouseWheel.bind(this);
const onMouseWheelThrottled = throttle(onMouseWheel, 250, {
leading: true,
});
this.onMouseWheelThrottled = onMouseWheelThrottled;
$(window).on('mousewheel DOMMouseScroll wheel scroll', this.onMouseWheelThrottled);
I've tried with/without the force3d, with/without the autokill. Should I maybe use another approach for the "scrolling" between section (translating body element or something like this)?
Thanks!