I never notice any difference

Hello,

try to put frameRate, animationTime and stepSize to half of their original values and you should be pretty close to this.

When I visit your website and scroll, it’s nice and smooth, but it depends on lazy loaded elements, your internet speed and also on your computer speed and if you have GPU acceleration etc… there is “expensive” content like images and videos that can cause some laggy scrolling on old computers, but the script is optimized as much as possible so that’s simply a technical limitation.

Thanks a lot, kubiq!

I changed the values as you proposed, but I’m still seeing rather “chunky” scrolling on my side. I’m starting to wonder if it doesn’t have anything to do with the Show-Hide header java script that I placed into the site’s header, because with every single minutest turn of my mouse scroller wheel the page either goes up/down by the amount of pixels which looks like about two times the height of the white header at the top of the site.

Here’s the code for the Show-Hide header. Maybe you could spot something?

<script>
“use strict”;
OB_ready(OB_doWhenReady);

function OB_doWhenReady() {
// localize everything
var ooohBoi = window.ooohBoi || {};
// local scope variables
ooohBoi.prev_scroll_pos = window.scrollY || document.body.scrollTop;
ooohBoi.cur_scroll_pos;
ooohBoi.scroll_direction = ‘init’;
ooohBoi.prev_scroll_direction = 0;
ooohBoi.header = document.querySelector(‘#show-hide-header’); // header ID
ooohBoi.header_pos = {
top: ooohBoi.header.offsetTop,
left: ooohBoi.header.offsetLeft,
};
ooohBoi.header_height = OB_outerHeight(ooohBoi.header);
// show-hide header with ease/transition
ooohBoi.header.style.transition = ‘all 0.3s ease’;
// update header height on window resize
ooohBoi.updateHeaderHeight = function() {
ooohBoi.header_height = OB_outerHeight(ooohBoi.header);
}
// listen “scroll” event and decide what to do
ooohBoi.checkScroll = function() {
ooohBoi.cur_scroll_pos = window.scrollY || document.body.scrollTop;

if (ooohBoi.cur_scroll_pos > ooohBoi.prev_scroll_pos) ooohBoi.scroll_direction = ‘down’;
else if (ooohBoi.cur_scroll_pos < ooohBoi.prev_scroll_pos) ooohBoi.scroll_direction = ‘up’;

if (ooohBoi.scroll_direction !== ooohBoi.prev_scroll_direction) ooohBoi.toggleHeader(ooohBoi.scroll_direction, ooohBoi.cur_scroll_pos);
ooohBoi.prev_scroll_pos = ooohBoi.cur_scroll_pos;
}
// add or remove class based on the scrolling direction
ooohBoi.toggleHeader = function(scroll_direction, scroll_current) {
if (scroll_direction === ‘down’ && scroll_current > ooohBoi.header_height) {
OB_addClass(ooohBoi.header, ‘im-hidden’); // for styling
ooohBoi.header.style.top = -1 * ooohBoi.header_height + “px”;
ooohBoi.prev_scroll_direction = scroll_direction;
} else if (scroll_direction === ‘up’) {
OB_removeClass(ooohBoi.header, ‘im-hidden’);
ooohBoi.header.style.top = ooohBoi.header_pos.top + “px”;
ooohBoi.prev_scroll_direction = scroll_direction;
}
}
// listen “scroll” and “resize” window events
window.addEventListener(‘scroll’, ooohBoi.checkScroll);
window.addEventListener(‘resize’, ooohBoi.updateHeaderHeight);
}

function OB_outerHeight(el) {
var height = el.offsetHeight;
var style = getComputedStyle(el);
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
return height;
}

function OB_addClass(el, className) {
if (el.classList) el.classList.add(className);
else {
var current = el.className,
found = false;
var all = current.split(‘ ‘);
for (var i = 0; i < all.length, !found; i++) found = all[i] === className;
if (!found) {
if (current === ”) el.className = className;
else el.className += ‘ ‘ + className;
}
}
}

function OB_removeClass(el, className) {
if (el.classList) el.classList.remove(className);
else el.className = el.className.replace(new RegExp(‘(^|\\b)’ + className.split(‘ ‘).join(‘|’) + ‘(\\b|$)’, ‘gi’), ‘ ‘);
}

function OB_ready(fn) {
if (document.readyState != ‘loading’) fn();
else if (document.addEventListener) document.addEventListener(‘DOMContentLoaded’, fn);
else {
document.attachEvent(‘onreadystatechange’, function() {
if (document.readyState != ‘loading’) fn();
});
}
}
</script>

Btw, thanks a lot for your help so far!

Well, as I wrote above – for me it works nicely and smooth and I don’t see any lags, but yes – I have very fast internet and very fast computer
Maybe just give it a try on another computer or another browser?
Be sure you’re testing it in inkognito mode as a non-logged user.