index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Michael Hudzevskyi</title>
</head>
<body>
    

    <div class="cursor"></div>
    <div class="cursor-follower"></div>
    
    <div class="portfolio">
        <div class="portfolio__item">
            <div class="portfolio__thumb">
                <img src="image.jpg" alt="image">
            </div>
        </div>
    </div>

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>


    <script>
        const cursor = $(".cursor")
        const follower = $(".cursor-follower")

        let posX = 0,
        posY = 0,
        mouseX = 0,
        mouseY = 0


        TweenMax.to({}, 0.016, {
            repeat: -1,
            onRepeat: function() {
                posX += (mouseX - posX) / 9
                posY += (mouseY - posY) / 9

                TweenMax.set(follower, {
                    css: {
                        left: posX - 20,
                        top: posY - 20
                    }
                })

                TweenMax.set(cursor, {
                    css: {
                        left: mouseX,
                        top: mouseY
                    }
                })
            }
        })


        $(document).on("mousemove", function(e) {
            mouseX = e.pageX
            mouseY = e.pageY
        })

        $(".portfolio__item img").on("mouseenter", function() {
            cursor.addClass('active')
            follower.addClass("active")
        })

        $(".portfolio__item img").on("mouseleave", function(){
            cursor.removeClass("active")
            follower.removeClass("active")
        })


    </script>
</body>
</html>