
Documentation
Webflow
Code
Setup: External Scripts
External Scripts in Webflow
Make sure to always put the External Scripts before the Javascript step of the resource.
In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?
HTML
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
Step 1: Copy structure to Webflow
Copy structure to Webflow
In the video below we described how you can copy + paste the structure of this resource to your Webflow project.
Copy to Webflow
Webflow structure is not required for this resource.
Step 1: Add HTML
HTML
<div class="btn-magnetic">
<a href="#" class="btn-magnetic__click" data-magnetic-strength="50" data-magnetic-strength-inner="25">
<div class="btn-magnetic__fill"></div>
<div data-magnetic-inner-target="" class="btn-magnetic__content">
<div class="btn-magnetic__text">
<p class="btn-magnetic__text-p">Magnetic Effect</p>
<p class="btn-magnetic__text-p is--duplicate">Magnetic Effect</p>
</div>
</div>
</a>
</div>
HTML structure is not required for this resource.
Step 2: Add CSS
CSS
.btn-magnetic {
font-size: 1em;
position: relative;
}
.btn-magnetic__click {
cursor: pointer;
border-radius: 4em;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: flex;
position: relative;
overflow: hidden;
text-decoration: none;
}
.btn-magnetic__fill {
background-color: #6448b2;
width: 100%;
height: 100%;
position: absolute;
}
.btn-magnetic__content {
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: .75em 2em;
display: flex;
position: relative;
}
.btn-magnetic__text {
position: relative;
overflow: hidden;
}
.btn-magnetic__text-p {
color: #ede7ff;
text-align: center;
margin-bottom: 0;
font-family: PP Neue Montreal, Arial, sans-serif;
font-size: 1em;
font-weight: 500;
line-height: 1.5;
position: relative;
}
.btn-magnetic__text-p.is--duplicate {
position: absolute;
top: 100%;
}
/* Hover */
.btn-magnetic__click .btn-magnetic__text-p {
transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
transform: translateY(0%) rotate(0.001deg);
}
.btn-magnetic__click:hover .btn-magnetic__text-p {
transform: translateY(-100%) rotate(0.001deg);
}
Step 2: Add custom Javascript
Custom Javascript in Webflow
In this video, Ilja gives you some guidance about using JavaScript in Webflow:
Step 2: Add Javascript
Step 3: Add Javascript
Javascript
function initMagneticEffect() {
const magnets = document.querySelectorAll('[data-magnetic-strength]');
if (window.innerWidth <= 991) return;
// Helper to kill tweens and reset an element.
const resetEl = (el, immediate) => {
if (!el) return;
gsap.killTweensOf(el);
(immediate ? gsap.set : gsap.to)(el, {
x: "0em",
y: "0em",
rotate: "0deg",
clearProps: "all",
...(!immediate && { ease: "elastic.out(1, 0.3)", duration: 1.6 })
});
};
const resetOnEnter = e => {
const m = e.currentTarget;
resetEl(m, true);
resetEl(m.querySelector('[data-magnetic-inner-target]'), true);
};
const moveMagnet = e => {
const m = e.currentTarget,
b = m.getBoundingClientRect(),
strength = parseFloat(m.getAttribute('data-magnetic-strength')) || 25,
inner = m.querySelector('[data-magnetic-inner-target]'),
innerStrength = parseFloat(m.getAttribute('data-magnetic-strength-inner')) || strength,
offsetX = ((e.clientX - b.left) / m.offsetWidth - 0.5) * (strength / 16),
offsetY = ((e.clientY - b.top) / m.offsetHeight - 0.5) * (strength / 16);
gsap.to(m, { x: offsetX + "em", y: offsetY + "em", rotate: "0.001deg", ease: "power4.out", duration: 1.6 });
if (inner) {
const innerOffsetX = ((e.clientX - b.left) / m.offsetWidth - 0.5) * (innerStrength / 16),
innerOffsetY = ((e.clientY - b.top) / m.offsetHeight - 0.5) * (innerStrength / 16);
gsap.to(inner, { x: innerOffsetX + "em", y: innerOffsetY + "em", rotate: "0.001deg", ease: "power4.out", duration: 2 });
}
};
const resetMagnet = e => {
const m = e.currentTarget,
inner = m.querySelector('[data-magnetic-inner-target]');
gsap.to(m, { x: "0em", y: "0em", ease: "elastic.out(1, 0.3)", duration: 1.6, clearProps: "all" });
if (inner) {
gsap.to(inner, { x: "0em", y: "0em", ease: "elastic.out(1, 0.3)", duration: 2, clearProps: "all" });
}
};
magnets.forEach(m => {
m.addEventListener('mouseenter', resetOnEnter);
m.addEventListener('mousemove', moveMagnet);
m.addEventListener('mouseleave', resetMagnet);
});
}
// Initialize Magnetic Effect
document.addEventListener('DOMContentLoaded', () => {
initMagneticEffect();
});
Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in Webflow
Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:
CSS
.btn-magnetic__click .btn-magnetic__text-p {
transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
transform: translateY(0%) rotate(0.001deg);
}
.btn-magnetic__click:hover .btn-magnetic__text-p {
transform: translateY(-100%) rotate(0.001deg);
}
Implementation
Attributes
- On the main element add the
[data-magnetic-strength]
attribute - Optionally if there is also a inner element animated also use the
[data-magnetic-strength-inner]
- To target the optinal inner element use
[data-magnetic-inner-target]
Magnetic Strength
You can set the strength by picking a number, for example: [data-magnetic-strength="50"]
and [data-magnetic-strength-inner="25"]
Usage on other objects
The magnetic effect doesn't have to be used on a button, it can also be used for other interactive elements.