Button
Hover
Bounce
Animation
Search
K
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
Copy
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/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
Copy
<a data-elastic-pulse-btn="" href="#" class="elastic-pulse-btn">
<div data-elastic-pulse-target="" class="elastic-pulse-btn__content">
<div class="elastic-pulse-btn__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none"><path d="M20.5 10.5H3.5V21.5H20.5V10.5Z" stroke="currentColor" stroke-width="2"></path><path d="M12 14.5V17" stroke="currentColor" stroke-width="2"></path><path d="M18 10.5V8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8V10.5" stroke="currentColor" stroke-width="2"></path></svg>
</div>
<div class="elastic-pulse-btn__text">
<span class="elastic-pulse-btn__span">Button with Icon</span>
</div>
</div>
</a>HTML structure is not required for this resource.
Step 2: Add CSS
CSS
Copy
.elastic-pulse-btn {
cursor: pointer;
text-decoration: none;
position: relative;
}
.elastic-pulse-btn__content {
color: #fff;
background-color: #ff8a4f;
border-radius: 50em;
justify-content: center;
align-items: center;
padding: .5em .75em;
display: flex;
position: relative;
box-shadow: inset 0 -.25em .375em 0 #97133433;
}
.elastic-pulse-btn__icon {
justify-content: center;
align-items: center;
width: 1.5em;
height: 1.5em;
padding: .25em;
display: flex;
}
.elastic-pulse-btn__text {
padding: .25em;
}
.elastic-pulse-btn__span {
white-space: nowrap;
font-size: 1em;
font-weight: 500;
line-height: 1.2;
display: block;
}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
Copy
function initElasticPulseButton() {
// Skip on touch devices
if (window.matchMedia('(hover: none) and (pointer: coarse)').matches) return;
document.querySelectorAll('[data-elastic-pulse-btn]').forEach(btn => {
const target = btn.querySelector('[data-elastic-pulse-target]') || btn;
let hoverLocked = false;
btn.addEventListener('mouseenter', () => {
if (hoverLocked) return;
hoverLocked = true;
setTimeout(() => { hoverLocked = false; }, 500);
const el = target;
const w = el.offsetWidth;
const h = el.offsetHeight;
const fs = parseFloat(getComputedStyle(el).fontSize);
const stretch = 0.75 * fs;
const sx = (w + stretch) / w;
const sy = (h - stretch * 0.33) / h;
if (el._pulseTl && el._pulseTl.kill) el._pulseTl.kill();
el._pulseTl = gsap.timeline()
.to(el, { scaleX: sx, scaleY: sy, duration: 0.1, ease: 'power1.out' })
.to(el, { scaleX: 1, scaleY: 1, duration: 1, ease: 'elastic.out(1, 0.3)' });
});
});
}
// Initialize Elastic Pulse Button (Bouncy)
document.addEventListener('DOMContentLoaded', () => {
initElasticPulseButton();
});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
Copy
Implementation
Container
Use [data-elastic-pulse-btn] to register the element as a pulse trigger that runs the animation on hover when a pointing device supports hover.
Target
Use [data-elastic-pulse-target] on a child to pulse that child instead of the container, on default the container with [data-elastic-pulse-btn] is pulsed.
Stretch
The pulse deformation is calculated dynamically from the element’s font-size, giving it a proportional bounce that fits both small and large buttons.
To adjust the intensity of the pulse, modify the stretch multiplier in the script:
const stretch = 0.75 * fs;Lock
A hover lock prevents spam triggering by holding the effect for 500ms after it starts.
Search
K
Original source
Dennis SnellenbergCreator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.