Currently, I am in the process of creating a mouse trail similar to what is found on this particular website. I have been using JavaScript, jQuery, and various libraries in my attempt to achieve this effect; however, it has proven to be more challenging than initially anticipated. In particular, I require assistance in duplicating the animated trail effect displayed on the website.
var container = document.getElementById("container");
var circle = document.querySelector(".circle");
TweenMax.set(circle, {
scale: 0,
xPercent: -50,
yPercent: -50
});
container.addEventListener("pointerenter", function(e) {
TweenMax.to(circle, 0.3, {
scale: 1,
opacity: 1
});
positionCircle(e);
});
container.addEventListener("pointerleave", function(e) {
TweenMax.to(circle, 0.3, {
scale: 0,
opacity: 0
});
positionCircle(e);
});
container.addEventListener("pointermove", function(e) {
positionCircle(e);
});
function positionCircle(e) {
var rect = container.getBoundingClientRect();
var relX = e.pageX - container.offsetLeft;
var relY = e.pageY - container.offsetTop;
TweenMax.to(circle, 0.3, {
x: relX,
y: relY
});
}body {
background: #000;
margin: 0;
max-width: 100%;
width: 100%;
padding: 0;
}
.section {
display: block;
position: relative;
width: 100vw;
height: 100vh;
max-width: 100%;
box-sizing: border-box;
justify-content: center;
align-content: center;
background: #000;
}
.circle {
position: absolute;
width: 100px;
height: 100px;
top: 0;
left: 0;
background: #fff;
border-radius: 80%;
backface-visibility: hidden;
pointer-events: none;
opacity: 1;
box-shadow: 0 0 50px #fff
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div id="container" class="section">
<div class="circle"></div>
</div>For an overview of my progress so far, please see my example on this link