Skip to main content

Animated Click To Send Button Using Html Css And Gsap

by Rustcode
animated-click-to-send-button-using-html-css-and-javascript

Animated Click To Send Button Using Html Css And Javascript

"Animated Click To Send Button with HTML, CSS, and JavaScript" can transform your website or app into an engaging and enjoyable user experience. This interactive element uses SVG graphics to create the animation. When users click the button, an enchanting animation unfolds— the button shrink and becomes round, floating an icon. This visual metaphor conveys the message-sending process in an engaging manner.

What makes this feature even more compelling is the inclusion of visual feedback. As the animation plays, a "done" sign, providing users with immediate confirmation that their message has been sent successfully. This not only enhances user satisfaction but also reduces any potential confusion.

Furthermore, the customization options are endless. You can adapt the animation to match your website's style, allowing you to maintain brand consistency. In essence, this "Click To Send Button" animation turns a routine action into a delightful experience, making your website or app more user-friendly and memorable.


Table Of Contents

Read Also:

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
 <head>
   <title>Animated Click To Send Button Using Html Css And Gsap</title>
 </head>
 <body>
	// Content
 </body>
</html>


You can incorporate all the required links and dependencies into the HTML document using the code snippet provided below. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js"></script>
<script src="https://assets.codepen.io/16327/DrawSVGPlugin3.min.js"></script>


Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below. 

<!DOCTYPE html>
<html>
<head>
<title>Animated Click To Send Button Using Html Css And Javascript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
  
  <svg viewBox="0 0 1400 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path id="paperPlaneRoute" d="M563.558,526.618 C638.854,410.19 787.84,243.065 916.53,334.949 1041.712,424.328 858.791,877.927 743.926,856.655 642.241,838.669 699.637,688.664 700,540" stroke="white"  stroke-width="3" style="stroke-dashoffset: 0.001px; stroke-dasharray: 0px, 999999px;"/>
    <g id="rectSent" clip-path="url(#clipPath)">
      <g id="rectSentItems">
        <rect id="sentBase" x="460" y="468.5" width="480" height="143" rx="23" fill="white"/>
        <text id="txtSent" fill="#4F67ED" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="82" font-weight="bold" letter-spacing="0.025em"><tspan x="637.487" y="568.027">Sent!</tspan></text>
      </g>
    </g>
    <g id="base">
      <g filter="url(#flShadow)"><rect id="btnBase" x="418.117" y="460.55" width="563.765" height="158.899" rx="27" fill="#F1F3FF" /></g>
        <text id="txtSend" fill="#291D89" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="82" font-weight="bold" letter-spacing="0.06em"><tspan x="679.379" y="568.027">Send</tspan></text>
        <g id="paperPlane" style="transform-origin: 0px 0px 0px;" data-svg-origin="563.55859375 527.734375" transform="matrix(0.8396,0.5432,-0.5432,0.8396,377.09924,-222.6639)">
        <path id="paperPlanePath" d="M560.611 481.384C562.003 479.263 565.113 479.263 566.505 481.384L607.063 543.177C615.657 556.272 607.507 573.375 592.766 575.676L566.422 557.462V510.018C566.422 508.436 565.14 507.154 563.558 507.154C561.976 507.154 560.693 508.436 560.693 510.018V557.462L534.349 575.676C519.609 573.375 511.459 556.272 520.053 543.177L560.611 481.384Z" fill="#4F67EB"/>
      </g>
    </g>
    <circle id="cBottom" cx="700" cy="540" r="97.516" fill="#C23F3F"  class="hidden"/>
    <circle id="cTop" cx="700" cy="502.365" r="107.898" fill="#C23F3F" class="hidden"/>
    <circle id="cCenter" cx="700" cy="540" r="123" fill="#A74C4C" class="hidden" />
    <circle id="cEnd" cx="495" cy="540" r="98" fill="#F1F3FF" class="hidden"/>
    <path id="tickMark" fill-rule="evenodd" clip-rule="evenodd" d="M597.3 489.026C595.179 487.257 592.026 487.541 590.257 489.662L550.954 536.768L534.647 522.965C532.539 521.181 529.384 521.444 527.6 523.551L519.096 533.598C517.312 535.706 517.575 538.861 519.682 540.645L538.606 556.662C538.893 557.162 539.272 557.621 539.74 558.012L549.847 566.445C551.967 568.214 555.12 567.929 556.889 565.809L608.042 504.501C609.811 502.38 609.527 499.227 607.406 497.458L597.3 489.026Z" fill="#4E67E8" class="hidden"/>
    <defs>
      <clipPath id="clipPath">
        <rect id="mask1" x="700" y="450" width="520" height="180" fill="white" id="clipRect"/>
      </clipPath>
      <filter id="flShadow" x="0" y="0" width="1000" height="1000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feOffset dx="4" dy="4"/>
        <feGaussianBlur stdDeviation="3.5"/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.5125 0 0 0 0 0.420677 0 0 0 0 0.420677 0 0 0 0.25 0"/>
        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
      </filter>
    </defs>
    </svg>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js"></script>
<script src="https://assets.codepen.io/16327/DrawSVGPlugin3.min.js"></script>
<script src="script.js"></script>
</body>
</html>

The code begins with the standard HTML structure, including a title and a link to an external stylesheet (style.css). Inside the <body> tag, there's an SVG element, which serves as the canvas for the button and its animations.

The SVG contains various elements:

The <defs> section defines a couple of clipping paths and a drop shadow filter for the button.

In the end of html document, external JavaScript libraries are included, such as GSAP (GreenSock Animation Platform) and plugins like MorphSVGPlugin and MotionPathPlugin. These libraries enable smooth animations and interactions for the button.

  • Path (paperPlaneRoute): This defines the route that an animated paper plane will follow when the button is clicked. The path is initially hidden.

  • Group (rectSent): This group contains the elements related to displaying the "Sent!" confirmation message. It includes a white rectangle (sentBase) and the text "Sent!" (txtSent) in a vibrant blue color.

  • Group (base): This group contains the main button elements. It includes a base rectangle (btnBase) with a soft blue color and the text "Send" (txtSend) in a darker blue.

  • Group (paperPlane): This group represents a paper plane that will animate along the specified route when the button is clicked. The paper plane's path is defined in the "paperPlanePath".

  • Circles (cBottom, cTop, cCenter, cEnd): These circles represent various parts of the animation and are initially hidden.

  • Path (tickMark): This path represents a checkmark animation that appears after the message is sent.

Read Also:

CSS:

@import url("https://fonts.googleapis.com/css2?family=poppins:wght@700&display=swap");

*{
  margin: 0;
  padding: 0px;
  box-sizing: border-box;
}

body {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
  font-family: "poppins", sans-serif;
	font-weight: bold;
  background-color: rgb(18, 18, 18);
}

svg {
	width: 100%;
	height: 100vh;
}

.hidden {
	visibility: hidden;
}

#base {
	cursor: pointer;
}

  • Font Import: It imports the "Poppins" font with a weight of 700 from Google Fonts for use in the document.

  • Universal Reset (*{}): It resets margins, padding, and sets the box-sizing property to ensure consistent styling across all elements.

  • Body Styling: It styles the <body> element to occupy the entire viewport height (100vh) and centers its content both horizontally and vertically using flexbox. The font family is set to "Poppins" with a bold weight, and the background color is set to a dark grayish color (#121212).

  • SVG Styling: It styles all <svg> elements to fill the entire viewport both in width and height.

  • Hidden Class (.hidden): This class is defined to set the visibility of elements with this class to "hidden." It can be used to hide certain elements initially and reveal them later through animations or interactions.

  • Base Styling (#base): It selects an element with the ID "base" and gives it a cursor property of "pointer," indicating that it's clickable.

Read Also:

SCRIPT:

gsap.registerPlugin(MotionPathPlugin);
MorphSVGPlugin.convertToPath("circle, rect");
gsap.set("#paperPlaneRoute", { drawSVG: "0% 0%" });
gsap.set("#rectSentItems", { x: "-=240" });
const tl = gsap.timeline();

let ranOnce = false;

function onBtnUp() {
	if (ranOnce) {
		tl.restart();
		return;
	}
	ranOnce = true;
	tl.to("#base", { duration: 0.2, scale: 1, transformOrigin: "50% 50%" });
	tl.to(
		"#btnBase",
		{ duration: 0.77, morphSVG: "#cBottom", ease: "power1.inOut" },
		"start"
	);

	tl.to("#btnBase", { duration: 0.23, morphSVG: "#cTop", ease: "power1.inOut" });
	tl.to("#btnBase", {
		duration: 0.2,
		morphSVG: "#cCenter",
		ease: "power1.inOut"
	});
	tl.to(
		"#btnBase",
		{ duration: 0.5, morphSVG: "#cEnd", ease: "power1.inOut" },
		"revealStart"
	);
	tl.to("#rectSentItems", { x: "0", duration: 0.5 }, "revealStart");
	tl.to(
		"#mask1",
		{ x: "-=260", duration: 0.5, ease: "power1.inOut" },
		"revealStart"
	);
	tl.to(
		"#paperPlane",
		{ x: "-=205", duration: 0.5, ease: "power1.inOut" },
		"revealStart"
	);
	tl.to(
		"#paperPlanePath",
		{ duration: 0.43, morphSVG: "#tickMark" },
		"start+=0.77"
	);

	tl.to(
		"#txtSend",
		{ duration: 0.6, scale: 0, transformOrigin: "50% 50%" },
		"start"
	);
	tl.to(
		"#paperPlaneRoute",
		{ drawSVG: "80% 100%", duration: 0.7, ease: "power1.inOut" },
		"start+=0.3"
	);
	tl.to(
		"#paperPlaneRoute",
		{ drawSVG: "100% 100%", duration: 0.2, ease: "power1.inOut" },
		"start+=1"
	);

	tl.to(
		"#paperPlane",
		{
			duration: 1,
			ease: "power1.inOut",
			immediateRender: true,
			motionPath: {
				path: "#paperPlaneRoute",
				align: "#paperPlaneRoute",
				alignOrigin: [0.5, 0.5],
				autoRotate: 90
			}
		},
		"start"
	);

	tl.to(
		"#paperPlanePath",
		{ duration: 0.15, attr: { fill: "#ffffff" } },
		"start"
	);
	tl.to(
		"#paperPlanePath",
		{ duration: 0.15, attr: { fill: "#4E67E8" } },
		"start+=0.77"
	);
}

function onBtnDown() {
	gsap.timeline({ defaults: { clearProps: true } });
	gsap.to("#base", { duration: 0.1, scale: 0.9, transformOrigin: "50% 50%" });
}

const btn = document.getElementById("base");
btn.addEventListener("mousedown", onBtnDown);
btn.addEventListener("mouseup", onBtnUp);

  • Plugin Registration: It registers the MotionPathPlugin, which allows for animations along a defined path. It also converts certain SVG shapes (circle and rectangle) into path elements using MorphSVGPlugin.

  • Initial Setup: It sets the initial state of the "paperPlaneRoute" SVG path to 0% drawn and shifts the position of the "rectSentItems" element to the left.

  • Animation Timeline (tl): It initializes a GSAP timeline to manage the sequence of animations.

  • onBtnUp Function: This function is triggered when the button is released (mouseup). It plays a series of animations, including morphing the button shape, moving elements, drawing a path, and animating a paper plane along that path. The animations create a visual effect of sending a message.

  • onBtnDown Function: This function is triggered when the button is pressed (mousedown). It briefly scales down the button to provide feedback when the button is pressed.

  • Event Listeners: Event listeners are added to the button element to detect when it's pressed and released. When the button is released, the "onBtnUp" function is executed, triggering the animation sequence. When the button is pressed, the "onBtnDown" function briefly scales down the button to provide visual feedback.

Output:

animated-click-to-send-button-using-html-css-and-javascript

Read Also:


Code Credit: Dilum Sanjaya


Comments

Post a Comment