Animated SVG not loading correctly

My website http://spoleta.com/ has an animated SVG logo in the header that is being controlled by this JavaScript.

        jQuery(document).ready(function($){
 $(window).scroll(function() {
var scrollPos = $(window).scrollTop();
    navbar = $('.x-navbar');

if (scrollPos > 1) {
  navbar.addClass('alt-color x-navbar-fixed-top');
   $('.x-brand img').attr('src','/wp-content/uploads/2018/06/spoleta_logo_reverse2.svg');
} else {
  navbar.removeClass('alt-color x-navbar-fixed-top');
  $('.x-brand img').attr('src','/wp-content/uploads/2018/06/spoleta_logo_forward.svg');
}
 });
   });

It works the first time you scroll up and down but then the animations seem to get “stuck”. Can anyone point me in the right direction? For every pixel you scroll it’s either make the src of the image one image or the other. So I think it’s making like a queue as you scroll.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.