Slow performance due to animations

[Bozzified]

So, everything works great up until I have about 10 or more elements on page that are initialized by OverlayScrollbar instance.

I have sections across the site and when I get to about 10 or more the OverlayScrollbar slows down drawing of elements and the wait is about 10-20 seconds before elements shows up. It's like CPU gets overloaded until it executes and initializes all elements and then it starts working. Something is going on under the hood with a bunch of divs using the OverlayScrollbar.

This is how I initialize:

$('.overlayScroll').overlayScrollbars({ className : "os-theme-dark", resize : "none", sizeAutoCapable : true, paddingAbsolute : true, overflowBehavior: { x: "hidden" }, });
Each area I want to make scrollable has this format:

<div class="section-content overlayScroll"> <div class="overlayScrollContent"> <div class="inner-title">Some title</div> <div class="inner-content">Some content text</div> </div> </div>

Everything works ok up to maybe 8-10 or so elements but then suddenly everything slows down to a crawl. One thing to note is that I'm using flexbox for most elements.

[KingSora]

Good day!

I need a few more infos from you:

• Do the divs, to which the plugin is applied to, have a content dependent or a fixed size? - Please provide some CSS.
• How are you manipulating your DOM? - Basically the plugin is doing nothing once the plugin is initialized. (until you are doing some changes inside the content or if the size of the host element changes)
• Does the option autoUpdate : true improve the performance?
• Does the option sizeAutoCapable : false improve the performance?

It would be really great if you could provide a small demo on jsfiddle.
The plugin isn't optimized well enough for Flexbox and this would be a great opportunity to do so.

[Bozzified]

To answer a few of your questions:

1. Content usually works with percentage numbers and is using mostly flexbox
2. I am really not manipulating the DOM that extensively. I am simply using GSAP to animate some elements in and out. They are usually not resized just kind of slide into the parent elements that are hidden and then shown.
3. I tried autoUpdate didn't really do much.
4. sizeAutoCapable:false actually did improve performance significantly. I had that at true. Changing it to false significantly improved the performance. Still a bit glitchy but A LOT better. I think it might work overall this way.

I have posted this problematic build using these params:
$('.overlayScroll').overlayScrollbars({ className : "os-theme-dark", resize : "none", sizeAutoCapable : true, paddingAbsolute : true, overflowBehavior: { x: "hidden" }, // autoUpdate: true });
Just so you can maybe look into it. I will have to push a new build to the staging server soon but I will leave it up this way until you can take a look at it all. You will see how slow it works so maybe you can optimize. Specifically go to CO+OP section you will see that it stalls quite badly.

I am using now sizeAutoCapable: false as that seems to resolve the problem even though not really super smooth but it will work but I would like for you to regardless take a look as your scroller is pretty nice.

Here's the deployed site. Inspect it as mobile.

[KingSora]

Thank you for the answers! - I'll definitely investigate at this problem.
I can't find the link to your deployed site anywhere, have you forgotten to attach it?

[Bozzified]

Oops sorry.. staging.hingecapital.com

[Bozzified]

I think the sizeAutoCapable: false works well enough. I have to push the new update that performs a lot better. I think you can close this but definitely try to investigate this sizeAutocapable: true and multiple elements that are assigned to overlayScrollbars initialization. Something is definitely making it super slow.

Thanks.

[KingSora]

Alright, I've took a look at your site and I think I've figured out what the problem is.
You're using the fullpage plugin, and you're doing quite expensive JavaScript animations with the TweenMax plugin on every page-scroll.

The plugin already provides a solution for this case. The sizeAutoCapable: false is actually just one small improvement you can do. I'll explain what is happening now and what will happen after you've built in the optimization:

Now the plugin is watching the DOM and if the DOM has changed in a certain way the plugin is thinking it has to update itself because of those changes. Since you're animation the DOM with JavaScript, it changes constantly over the whole animation period. Thats okay on one or two instances but if you've more instances this scenario can get quite slow and you have to tell the plugin on which changes it has to update and on which not.

The plugin offers a sleep method. This method was specially designed for such cases and tells the plugin to stop updating the DOM by itself.

The plan is now, that you put all instances to sleep if they're not needed or beeing animated until the animations are completed. It's actually quite easy to do so, since your code is well structured. All you have to do is to optimize the afterLoad and the onLeave callback of your fullpage instance.

This is how the afterLoad callback should look like, after you've took advantage of the sleep method. I've commented all additional lines I've added:

afterLoad: function (anchorLink, index) {
	var loadedSection;
	loadedSection = $(this);
	
        /* OverlayScrollbars-Fix: Put all the instaces in this section to sleep */
	var osInstances = loadedSection.find('.overlayScroll').overlayScrollbars();
	$.each(osInstances, function(index, value) { 
		if(value.sleep)
			value.sleep();
	});

	if (index == 2)
		showCollective();
	if (index == 3)
		showCompany();
	if (index == 4)
		showData();
	if (index == 5)
		showReserves();
	if (index == 6)
		showContact();

        /* OverlayScrollbars-Fix: wake all the instances in this section up */
	setTimeout(function() { 
		$.each(osInstances, function(index, value) { 
			if(value.update)
				value.update();
		});
	}, /* the average timespan in ms after all animations are completed - for example 1000 */ 1000);
}

I hope you've got the idea. You can optimize the onLeave callback the same way.
Unfortunately this problem hasn't anything to do with flexbox. The performance drop is happening just because of the animations.

Please try this fix and tell me if its working. Please also use autoUpdate : null.