Implement custom cursor from codepen into webflow

Valeria_Galati · October 2, 2019, 2:51pm

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)

mattvaru · October 2, 2019, 3:13pm

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.

Valeria_Galati · October 2, 2019, 3:40pm

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:

< script src=“https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js”>< /script >
< script > CSS < /script >
< script > JS < /script >

I have tried, but I’m wondering if I should paste the CSS first and then the Javascript dependency + JS?

Thanks,
Val

mattvaru · October 2, 2019, 3:49pm

Can you share your read-only link?

Valeria_Galati · October 2, 2019, 4:02pm

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

mattvaru · October 2, 2019, 4:10pm

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>

Valeria_Galati · October 2, 2019, 4:13pm

yeah, it works now thank you so much!!!

Cheers,
Val

Valeria_Galati · October 2, 2019, 9:26pm

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

Topic		Replies	Views
Custom Cursor code Custom code	11	10769	December 29, 2018
Need help integrating custom cursor from Codepen Custom code	7	1067	March 28, 2022
Hamburger menu custom CSS codepen General	9	2030	October 7, 2019
Doubled Custom Cursor Activation Custom code	5	2428	March 23, 2019
Use a custom cursor Custom code	41	20657	November 30, 2022

Implement custom cursor from codepen into webflow

Related topics