mouse move

index.pug

  //- Обязательные вложения ointin.fixpoint > fixtarget
            li.fb.pointin.fixpoint
              a.fixtarget(href='#')

main.sass

	//cursor
		.box
			position: fixed
			width: 8px
			height: 8px
			top: 50%
			left: 50%
			margin: -4px 0 0 -4px
			background: #fa343d
			-moz-border-radius: 50%
			-webkit-border-radius: 50%
			border-radius: 50%
			-webkit-backface-visibility: hidden
			opacity: 0
			cursor: none
			z-index: 1000
			pointer-events: none
			transform-style: preserve-3d
			-webkit-transform-style: preserve-3d
			will-change: transform
			&.hover
				height: 30px
				width: 30px
				margin: -15px 0 0 -15px
				background: transparent
				border: 2px solid #fa343d
		//move element for hover
		.pointer.hovered .ft
			transform: scale(1.1)							
		.pointer
			position: fixed
			right: 6%
			top: 6%
			width: 50px
			height: 50px	
			border-radius: 100%
			overflow: hidden
			transition: all 260ms ease-out !important
			z-index: 10
			.ft
				transform: scale(0)
				background: red
				width: 100%
				height: 100%
				transition: all .4s
				border-radius: 100%	
			span
				position: absolute
				width: 60%
				height: 3px
				background: #ffffff
				left: calc(50% - 30%)
				top: calc(50% - 1.5px)
				z-index: 2
				&:before
					content: ''
					position: absolute
					width: 100%
					height: 3px
					background: #ffffff
					left: 0
					top: 10px
				&:after
					content: ''
					position: absolute
					width: 100%
					height: 3px
					background: #ffffff
					left: 0
					top: -10px			
		.fb
			width: 30px
			height: 30px
			margin: 50px auto
			list-style: none
			a
				display: block
				width: 100%
				height: 100%
				svg
					width: 10px		

mouse.js

//show this cursor
$('.pointer').hover(
    function() {
        TweenLite.to($box.eq(0), 0.1, {opacity: 0, repeat:0, delay: 0, overwrite:"all", ease: Circ.easeInOut});
        TweenLite.to($box.eq(1), 0.3, {scale: 0, opacity: 0, repeat:0, delay: 0, overwrite:"all", ease: Circ.easeInOut});
    }, function() {
        TweenLite.to($box.eq(0), 0.1, {opacity: 1, repeat:0, delay: 0, overwrite:"all", ease: Circ.easeInOut});
        TweenLite.to($box.eq(1), 0.3, {scale: 1, opacity: 1, repeat:0, delay: 0, overwrite:"all", ease: Circ.easeInOut});
    }
);

// callback function "zoom cursor for hover to eleent"
$('.pointin').on('mouseenter', showPoint);
$('.pointin').on('mouseleave', hidePoint);

//callback function to move cursor
$(document).on('mousemove', moveBox);

//when hover on '.pointer' hide cursor 
$( ".pointer" ).each(function( index ) {
    $(this).hover(
        function() {
            $(this).addClass('hovered');
        }, function() {
            $(this).removeClass('hovered');
            $(this).css({
                transform: 'translate3d(0px, 0px, 0px)'
            });
        }
    );
    // move this element for hover
    $(this).mousemove(function( e ) {
        const bounds = this.getBoundingClientRect();
        const centerX = bounds.left + (bounds.width/2);
        const centerY = bounds.top + (bounds.height/2);
        
        const deltaX = Math.floor((centerX - e.clientX)) * 2 * -1;
        const deltaY = Math.floor((centerY - e.clientY)) * 2 * -1;
        
        TweenLite.to($(this), 0, {
            x: deltaX,
            y: deltaY,
        });
    });
});



var $box = $('.box');
	//move main cursor and stop animation when element has class fixit
	function moveBox(e) {
        var timesel = 0.3;

		$box.each(function(index, val) {
            if(!$(this).hasClass('fixit')) {
                if(index == 1) {
                    TweenLite.to($(this), timesel, { css: { left: e.pageX, top: e.pageY},delay:0+(index/750)});
                } else {
                    TweenLite.to($(this), 0.05, { css: { left: e.pageX, top: e.pageY},delay:0+(index/750)});
                }
            } else {
                TweenLite.to($(this), timesel, { css: { opacity: 1, scale: 1 },delay:0+(index/750)});
            }
		});
    }



var showPointBase = [30, 30];
    // function scale cursor when cursor move in element
	function showPoint(e) {
        busy = true;

        if($(e.target).hasClass('fixpoint')) {
            $box.eq(1).addClass('fixit');
            var fixtarget = $(e.target).find('.fixtarget');
        } else if($(e.target).closest('.fixpoint').length) {
            $box.eq(1).addClass('fixit');
            // caselist
            if($(e.target).closest('.fixpoint').hasClass('info')) {
                var fixtarget = $(e.target).closest('.info').find('.fixtarget');
            } else {
                var fixtarget = $(e.target);
            }
        }

        if($(e.target).hasClass('fixpoint') || $(e.target).closest('.fixpoint').length) { 
            var subadd = 10;
                twidth = $(fixtarget).width()+subadd,
                theight = $(fixtarget).height()+subadd,
                pos = $(fixtarget).offset(),
                posTop = pos.top+subadd,
                posLeft = pos.left+subadd;

            TweenLite.to($box.eq(1), 0.5, { scale: 1, width: twidth, height: theight, left: posLeft, top: posTop, opacity: 1, overwrite: "all", ease: Circ.easeOut});
        }
    }
    // exit this elemt
	function hidePoint(e) {
        $box.eq(1).removeClass('fixit');

        busy = false;
        TweenLite.to($box.eq(1), 0.3, { scale: 1, width: showPointBase[0], height: showPointBase[1], marginTop: -showPointBase[1]/2, marginLeft: -showPointBase[0]/2, opacity: 1, overwrite: "all", ease: Circ.easeOut});
    }