Morphing Play/Pause (GSAP MorphSVG)
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.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/MorphSVGPlugin.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
<button data-play-pause="toggle" class="play-pause-button">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 25" fill="none" class="play-pause-icon">
<path d="M3.5 5L3.50049 3.9468C3.50049 3.177 4.33382 2.69588 5.00049 3.08078L20.0005 11.741C20.6672 12.1259 20.6672 13.0882 20.0005 13.4731L17.2388 15.1412L17.0055 15.2759M3.50049 8L3.50049 21.2673C3.50049 22.0371 4.33382 22.5182 5.00049 22.1333L14.1192 16.9423L14.4074 16.7759" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="16" stroke-linecap="round" data-play-pause="path"></path>
</svg>
</button>HTML structure is not required for this resource.
Step 2: Add CSS
CSS
.play-pause-button {
background-color: #000;
border: none;
justify-content: center;
align-items: center;
width: max(7.5rem, 10vw);
height: max(7.5rem, 10vw);
padding: 0;
display: flex;
}
.play-pause-icon {
width: 100%;
height: 100%;
}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
gsap.registerPlugin(MorphSVGPlugin);
function initMorphingPlayPauseToggle() {
const playPath = "M3.5 5L3.50049 3.9468C3.50049 3.177 4.33382 2.69588 5.00049 3.08078L20.0005 11.741C20.6672 12.1259 20.6672 13.0882 20.0005 13.4731L17.2388 15.1412L17.0055 15.2759M3.50049 8L3.50049 21.2673C3.50049 22.0371 4.33382 22.5182 5.00049 22.1333L14.1192 16.9423L14.4074 16.7759";
const pausePath = "M15.5004 4.05859V5.0638V5.58691V8.58691V15.5869V19.5869V21.2549M8.5 3.96094V10.3721V17V19L8.5 21";
const buttonToggle = document.querySelector('[data-play-pause="toggle"]');
const iconPath = buttonToggle.querySelector('[data-play-pause="path"]');
let isPlaying = false; // keep track of state to control the morph
buttonToggle.addEventListener("click", () => {
gsap.to(iconPath, {
duration: 0.5,
morphSVG: {
type: "rotational",
map: "complexity", // morphs the shape based on the amount of anchor points, it's fastest!
shape: isPlaying ? playPath : pausePath, // if button is 'playing', morph to pause and vice versa
},
ease: "power4.inOut",
});
isPlaying = !isPlaying; // control play/pause state again
});
}
// Initialize Morphing Play/Pause Toggle
document.addEventListener('DOMContentLoaded', () => {
initMorphingPlayPauseToggle();
});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
Implementation
Toggle
Use [data-play-pause="toggle"] on the main button to make it trigger the morph animation between play and pause.
Path
Inside the button, the [data-play-pause="path"] attribute defines which SVG path should morph when toggled. The GSAP animation replaces its d value with the matching target path.
Animation
The morph animation uses morphSVG with { type: "rotational", map: "complexity" } for smoother transitions between uneven point counts. Duration and easing are adjustable inside the script. default is 0.5s using power4.inOut.
Path customization
For the best results, make sure the playPath value inside your JavaScript matches the exact path used in your HTML. To get this data, open your desired SVG file in a text or code editor, and copy only the value from the d attribute of the <path> element. That’s the shape data GSAP uses for morphing.
<!-- Example -->
<path d="M3.5 5L3.50049 3.9468C3.50049 3.177 4.33382 2.69588 ..." data-play-pause="path" />Tips
Works best with single-path SVGs that have similar point complexity between states. Avoid grouped shapes or masks for smoother morphing and fewer alignment artifacts. We also recommend diving into the official GSAP docs of this Plugin, because there's a lot of cool features to explore!
Resource details
Last updated
November 5, 2025
Category
Buttons
Need help?
Join Slack
Original source
Ilja van EckCreator 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.