Hello, I’m at a loss for why this headline sticks and delays on its first run in the browser,
its especially sticky and clunky in safari. any thoughts? fixes? client is getting a bit frustrated as we are trying to figure out what the issue is. thank you
What do you mean sticky and clunky? Is there a certain transition that isn’t working as you had hoped? In Safari I do see that the content below the header takes a bit for it to appear.
There are a lot of scroll actions occuring outside of Hype which might be increasing the clunkiness during scroll:
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 60) {
$(".asfasfsa").addClass("asfasfsaasfasfsa");
} else {
$(".asfasfsa").removeClass("asfasfsaasfasfsa");
}
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 60) {
$(".logo.logoonscrol").addClass("darkHeadescsr");
} else {
$(".logo.logoonscrol").removeClass("darkHeadescsr");
}
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll >= 500) {
$(".header").addClass(".change");
} else {
$(".header").removeClass(".change");
}
});
(function($) {
var $window = $(window),
$html = $('.mobilemenu');
$window.resize(function resize() {
if ($window.width() > 814) {
return $html.addClass('mobilesa');
}
$html.removeClass('mobilesa');
}).trigger('resize');
})(jQuery);
</script>Hi Daniel,
Thank you for the fast response, apologies for my delay. Upon the first run the headline actually stops, skips back suddenly as if to Sart over but in an awkward position, the issue is obvious like it didn’t load right or crashed and stopped. this appears the first time the headline plays. once it gets past its freaking out, it works smoothly as intended, like the 2nd or third refresh(without clearing the cache). are you seeing this?
Here’s a quick video screen grab. the first run is from a hype test in chrome, this is how it should run, the second is what happens in my safari browser
The first part is previewed directly from Hype, and the second part is embedded within the hubspot marketing pages alongside everything they have going on. The clunkiness is due to the fact that when the Hype document loads at the beginning, there's a great deal of other animations occuring at the same time so the frame rate really suffers. When previewing the Hype document all alone, it has the entire CPU to itself. You could delay the header animation so that it occurs 1 or 2 seconds after the page loads to stagger your CPU needs.
ok. this makes sense, sounds like a CPU overloading issue. perhaps I could also try suppressing/delaying the other animations loading to take the pressure off? I’ll give this a try and let you know. thanks!