Можно ли наблюдать за переходом CSS, чтобы следить за его изменением в jquery / javascript?

Question

То, чего я пытаюсь добиться - это иметь (.radial-Gradient), который центрируется в верхней части экрана, прокручивать влево и постепенно уменьшать логотип, когда пользователь прокручивает веб-страницу. Однако для того, чтобы он выглядел максимально гладко, мне нужно было бы поменять логотип меньшего размера, прежде чем (.radial Gradient) достигнет margin-left: 0px;

Я могу добиться этого с помощью eventListener и transitionendкак это:

function whichTransitionEvent() {
            let t;
            let el = document.createElement('fakeelement');
            let transitions = {
                'transition':'transitionend',
                'OTransition':'oTransitionEnd',
                'MozTransition':'transitionend',
                'WebkitTransition':'webkitTransitionEnd'
            }

            for(t in transitions){
                if( el.style[t] !== undefined ){
                    return transitions[t];
                }
            }
}

const tran = document.getElementsByClassName('radial-gradient')[0];
let transitionEvent = whichTransitionEvent();
transitionEvent && tran.addEventListener(transitionEvent, function() {
                let style = rad.css('margin-left');                 
                if (style == '0px') {
                    $('.left-logo').removeClass('hide');
                }
            });

Однако, это начинает небольшой переход логотипа после того, как центрированный (.radial-градиент) достигает 0px, что слишком поздно. Я хочу, чтобы он начал исчезать, когда центральное изображение достигает 90px;