ненужная прорисовка объекта
 

есть такой скрипт

$(document).ready(function()
{
    $('#line').viewportChecker
({
        callbackFunction: function hf(elem, action)
{
var hf = new TimelineMax();

hf.add(TweenMax.fromTo(".line_hf2", 1,{drawSVG:"100% 100%"}, {drawSVG:"0% 100%" }));
hf.add(TweenMax.to('#kv', 0.5, {opacity:1}));
hf.add(TweenMax.to('#line2', 0.1, {opacity:1}));
hf.add(TweenMax.fromTo(".line2", 1, {drawSVG:"100% 100%"}, {drawSVG:"0% 100% " }));
hf.add(TweenMax.to('#hf', 0.1, {opacity:1}));
hf.add(TweenMax.to('#kv', 0.5, {opacity:0, x:100}));
hf.add(TweenMax.to('#f_1_s', 0.5, {opacity:0, x:100}));
hf.add(TweenMax.fromTo(".line_hf2", 1, {drawSVG:"0% 100%"}, {drawSVG:"100% 100% " }));
    }

});
    });

все работает как нужно, но есть маленький ньюанс.
когда проматываешь до места срабатывания скрипта то там видно прорисованный объект .line_hf2 (как я понимаю он рисуется при загрузке страницы)
тут же включается скрипт и объект исчезает и рисуется заново.
как убрать его преждевременную прорисовку.

решил но криво
задал стиль .line_hf2 {opacity:0;}
и
TweenMax.fromTo(".line_hf2", 1,{drawSVG:"100% 100%"}, {drawSVG:"0% 100%", opacity:1 })
прорисовывает с появлнием.
если кто знает как лучше напишите