SVG resize on scroll animation choppy/stuttering

Im using an SVG file for a logo which is around 100kb in size. It resizes on scroll but the animation is choppy/stuttering. I was previously using the same logo but all one colour so the file size was only 5kb and the resize animation worked fine. I cant get the filesize any smaller than it is so Im wondering how to make the resizing animation smooth?

jQuery(document).ready(function( $ ) {
$(window).scroll(function () {
    if ($(document).scrollTop() > 1) {
        $('#logo').addClass('small');
    } else {
        $('#logo').removeClass('small');
    }
});
  });

#logo {
    width: calc(100% - 100px);
    transition:width 0.5s ease-in-out;
}

#logo.small {
        width: 250px;
    transition:width 0.5s ease-in-out;
}

body {
height : 1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="elementor-element elementor-element-17619c0 elementor-fixed elementor-widget elementor-widget-image" data-id="17619c0" data-element_type="widget" id="logo" data-settings="{&quot;_position&quot;:&quot;fixed&quot;}" data-widget_type="image.default">
                <div class="elementor-widget-container">
                    <div class="elementor-image">
                                        <img src="https://daisy.garywestjr.com/wp-content/uploads/2020/07/Logo.svg" class="attachment-full size-full" alt="">                                           </div>
                </div>
                </div>
        </body>

SVG resize on scroll animation choppy/stuttering

0 Answers