Hi guys,
I’m building my new website and I’m trying to use this Codepen cursor but I’m not too sure where I should paste HTML/ CSS/JS:
I’m using the HTML into the head and the CSS opening tags ( ) into the before tag section… but I’m wondering if there is something that I’m missing as is not CSS but SCSS?
Thanks,
Val
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hey Val! Welcome to the Webflow Forums! 
You should only need to make some minor tweaks to that CodePen to make it work with your Webflow project.
First, In the Page Head (Inside <head> tag), paste the following: it’s the Javascript library required, a JS Snippet, and the CSS required (converted from SCSS to CSS):
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
var cursor = $(".cursor"),
follower = $(".cursor-follower");
var posX = 0,
posY = 0;
var 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 - 12,
top: posY - 12
}
});
TweenMax.set(cursor, {
css: {
left: mouseX,
top: mouseY
}
});
}
});
$(document).on("mousemove", function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(".link").on("mouseenter", function() {
cursor.addClass("active");
follower.addClass("active");
});
$(".link").on("mouseleave", function() {
cursor.removeClass("active");
follower.removeClass("active");
});
});
</script>
<style>
body {
width: 100%;
height: 100vh;
cursor: none;
}
.cursor {
position: absolute;
background-color: #fff;
width: 6px;
height: 6px;
border-radius: 100%;
z-index: 1;
transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
user-select: none;
pointer-events: none;
z-index: 10000;
transform: scale(1);
}
.cursor.active {
opacity: 0.5;
transform: scale(0);
}
.cursor.hovered {
opacity: 0.08;
}
.cursor-follower {
position: absolute;
background-color: rgba(255, 255, 255, 0.3);
width: 20px;
height: 20px;
border-radius: 100%;
z-index: 1;
transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
user-select: none;
pointer-events: none;
z-index: 10000;
transform: translate(5px, 5px);
}
.cursor-follower.active {
opacity: 0.7;
transform: scale(3);
}
.cursor-follower.hovered {
opacity: 0.08;
}
a {
text-decoration: none;
text-transform: uppercase;
color: white;
font-size: 11px;
letter-spacing: 1px;
}
.link-list {
position: absolute;
bottom: 0;
left: 0;
list-style: none;
}
.link-list__item {
display: inline-block;
}
</style>
Lastly, you’ll need to add two HTML elements to your page. You can either:
(1) Drag in two divs (anywhere on the page, preferably one of your topmost elements) and give the first div a class of cursor and the second div a class of cursor-follower. Do not style these as the styles come from the custom CSS!
OR
(2) Drag an embed element (again, anywhere) and paste the following in:
<div class="cursor"></div>
<div class="cursor-follower"></div>
That should be it! Let me know if that got it working for you. 
Hi Matt,
Thank you for the quick reply.
I have tried but still doesn’t work…
So you place all the code into Inside in this order:
I have tried, but I’m wondering if I should paste the CSS first and then the Javascript dependency + JS?
Thanks,
Val
Can you share your read-only link?
Yes sure,
sorry for the mess on the page… I have other things to sort out ( like sticky bottom nav)
Anyway, this is the link: https://preview.webflow.com/preview/valeria-g?utm_medium=preview_link&utm_source=designer&utm_content=valeria-g&preview=9d11242949a06fa5037ede975e85584e&mode=preview
Thanks,
Val
All good!
Try deleting all the custom code that you’ve pasted into the Page Head and pasting in the following, which includes the Javascript dependency, the Javascript code, and the CSS (which looks to be missing currently.)
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
var cursor = $(".cursor"),
follower = $(".cursor-follower");
var posX = 0,
posY = 0;
var 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 - 12,
top: posY - 12
}
});
TweenMax.set(cursor, {
css: {
left: mouseX,
top: mouseY
}
});
}
});
$(document).on("mousemove", function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(".link").on("mouseenter", function() {
cursor.addClass("active");
follower.addClass("active");
});
$(".link").on("mouseleave", function() {
cursor.removeClass("active");
follower.removeClass("active");
});
});
</script>
<style>
body {
width: 100%;
height: 100vh;
cursor: none;
}
.cursor {
position: absolute;
background-color: #fff;
width: 6px;
height: 6px;
border-radius: 100%;
z-index: 1;
transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
user-select: none;
pointer-events: none;
z-index: 10000;
transform: scale(1);
}
.cursor.active {
opacity: 0.5;
transform: scale(0);
}
.cursor.hovered {
opacity: 0.08;
}
.cursor-follower {
position: absolute;
background-color: rgba(255, 255, 255, 0.3);
width: 20px;
height: 20px;
border-radius: 100%;
z-index: 1;
transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
user-select: none;
pointer-events: none;
z-index: 10000;
transform: translate(5px, 5px);
}
.cursor-follower.active {
opacity: 0.7;
transform: scale(3);
}
.cursor-follower.hovered {
opacity: 0.08;
}
a {
text-decoration: none;
text-transform: uppercase;
color: white;
font-size: 11px;
letter-spacing: 1px;
}
.link-list {
position: absolute;
bottom: 0;
left: 0;
list-style: none;
}
.link-list__item {
display: inline-block;
}
</style>
yeah, it works now thank you so much!!! 
Cheers,
Val
Hey,
I have double checked and I have realised that the hover over effect doesn’t quite work like codepen… do you know what could be?
Thanks,
Val