twin animation hook

twin_animation_hook.js

var mouseX = 0,
            mouseY = 0,
            limitX = 39 - 23,
            limitY = 33 - 23;
        $(window).bind('mousemove', function(e) {
            var offset = $('.eye').offset();
            mouseX = Math.min(e.pageX - offset.left, limitX)
            mouseY = Math.min(e.pageY - offset.top, limitY)
            if (mouseX < 0) mouseX = 0
            if (mouseY < 0) mouseY = 0
        });
        var follower = $('.eyeball');
        var xp = 0,
            yp = 0;
        var loop = setInterval(function() {
            xp += (mouseX - xp) / 12
            yp += (mouseY - yp) / 12
            follower.css({
                left: xp,
                top: yp
            });

        }, 10);

        var eyesHidden = false,
            hideStart = 170,
            hideEnd = 203,
            filterHidden = false,
            filterStart = 140, //кадр, с которого город темнеет
            filterEnd = 190 //кадр, с которого город светлеет

        function inRange(min, max, testVal) {
            return (testVal > min) && (testVal < max)
        }

        function showEyes() {
            follower.show()
            eyesHidden = false
        }

        function hideEyes() {
            follower.hide()
            eyesHidden = true
        }

        function updateEyesVisibility(evt) {
            inRange(hideStart, hideEnd, evt.target.position) && !eyesHidden ? hideEyes() : !inRange(hideStart, hideEnd, evt.target.position) && eyesHidden ? showEyes() : null
                //console.log(evt.target.position, inRange(hideStart, hideEnd, evt.target.position))
        }
        setTimeout(
            function() {
                timeline.on('change', updateEyesVisibility)
            },
            100
        )

        function showFilter() {
            console.log('nonfiltered') //сюда пишем код для светлого города
            filterHidden = false
        }

        function hideFilter() {
            console.log('filtered') // код для темного города
            filterHidden = true
        }

        function updateFilter(evt) {
            inRange(filterStart, filterEnd, evt.target.position) && !filterHidden ? hideFilter() : !inRange(filterStart, filterEnd, evt.target.position) && filterHidden ? showFilter() : null
        }
        
        setTimeout(
            function() {
                timeline.on('change', updateFilter)
            },
            100
        )