TweenMax при выходе из функции — как реализовать условие?

Я использую библиотеки JS: GSAP вместе с ScrollMagic.io от Яна Паепке.

Scrollmagic.io позволяет мне запускать некоторые изменения CSS при прокрутке после достижения определенного элемента триггера, сценарий JS выглядит следующим образом:

var controller = new ScrollMagic.Controller();
                        var scene = new ScrollMagic.Scene({
                                triggerElement: "#trigger1"
                            })
                            .setTween(new TimelineMax().add([
                                TweenMax.to("header", 0.5, {backgroundColor: "rgba(40,80,01, 0.95)", height:"6%", width:"100%", top:"0", borderRadius:"0px"}),
                                TweenMax.to(".headernav", 0.5, {color:"white", fontSize:"1.5em", marginTop:"10px"}),
                                TweenMax.to(".circle", 0.5, {height:"35px", marginTop:"10px"}),
                                TweenMax.to("#logo", 0.5, {width:"70px", marginTop:"-10px", marginRight:"500px"})
                            ]))
                            .addTo(controller);

В общем, он изменит положение, цвет фона и цвет шрифта моего меню, как только оно будет прокручено над белой областью веб-сайта, чтобы оно по-прежнему было заметным и легко читаемым.

Проблема в том, что мой a:hover в меню перестал работать. Я нашел обходной путь, используя это:

$("#verticalnav p").hover(over, out);

     function over(){
          TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"})
     }

     function out(){
          TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"})
     }

Это заставляет его работать нормально, но есть еще одна вещь, которую нужно проработать - хотя фон меню белый, цвет: тускло-серый шрифт хорошо заметен / читабелен, но он также останется тускло-серым на зеленом фоне после прокрутки.

Вот пояснение к снимку экрана, чтобы показать это более наглядно:

Состояние меню по умолчанию без наведения:

On:hover using js — изменяет цвет с помощью скрипта, показанного выше:

Здесь некоторые свойства меню изменились вместе с цветом шрифта, чтобы его было удобнее читать на зеленом фоне:

А вот как это выглядит, когда мышь находится ВНЕ от ссылки, оставляя ее тускло-серой, потому что это делает скрипт:

Мой вопрос: как я могу реализовать условное выражение в этом скрипте:

$("#verticalnav p").hover(over, out);

 function over(){
      TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"})
 }

 function out(){
      TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"})
 }

чтобы он считывал текущее значение цвета и запускал TweenMax.to с определенным цветом в соответствии с этим значением? Я довольно зеленый с JS, поэтому любые советы будут высоко оценены.

С уважением, Дамиан.