Customization
GSAP Draggable Effect
How to add it to your website
1-add custom code to page settings (before </body> tag).
<script>
gsap.registerPlugin(Draggable);
document.addEventListener("DOMContentLoaded", function () {
const cards = document.querySelectorAll(".home-card");
cards.forEach(card => {
card.style.willChange = "transform";
card.style.transformStyle = "preserve-3d";
});
gsap.set(".home-card", { force3D: true });
Draggable.create(".home-card", {
type: "x,y",
edgeResistance: 0.2,
inertia: true,
bounds: ".hero-section",
zIndexBoost: false
});
});
</script>
2-style the code embed.
Discover Now!
+