Congratulations Animation using CSS

Nowadays, the use of animated text on the web page taking the designer’s attention. Every designer tries to make something mind-blowing by using animations. Although, CSS animations can be used with various components. But using textual animation makes it more meaningful. It not only makes the text animated but also makes it delightful. So, in this tutorial, we are going to create a simple Congratulations text animation using CSS.

In order to create a “Congratulations” delighted text animation, we will use Font Awesome CSS for stars icons, TweenMax (for scaling and shaking animation), and jQuery library. Similarly, we will use CSS to style to finalize the text animation. For the final output, you can browse on the demo page to see how starburst and text scaling & shaking animation work.

The HTML Structure

First of all, load the dependencies by adding the following CDN link into the head tag of your HTML page.

<!-- Font Awesome CSS -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<!-- jQuery JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<!-- TweenMax JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<!-- Underscore JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>

After loading the necessary assets, create a div element with a class name "congrats" and place h1 element that contains “Congratulations” text. You can create this HTML structure for the animation anywhere in your webpage.

<div class="congrats">
	<h1>Congratulations!</h1>
</div>

CSS for Congratulations Animation

In CSS, first of all, import the “Sigmar One” fonts by using the @font-face rule and define the font styles as follows:

@font-face {
  font-family: 'Sigmar One';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sigmarone/v15/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');
}

In the second step, define the CSS gradient background color for the body element or the container element in which you want to display congratulations animation. Keep the overflow hidden in order to prevent overlapping of the stars and text.

body {
  background: #f953c6;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #b91d73, #f953c6);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #b91d73, #f953c6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #fff;
  overflow: hidden;
}

Now, select the "congrats" class that is the container element of the text animation. Define its height and width along with an absolute position and specify the top value as 140px. Use the padding property with 20px 10px value to leave some space around the container. Likewise, define the margin, left, and right values as follows:

.congrats {
  position: absolute;
  top: 140px;
  width: 550px;
  height: 100px;
  padding: 20px 10px;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
}

After that, target the h1 element of the congrats container and define its transform-origin as 50% 50%. Similarly, define the font size, font family, and cursor property. Here the important property is the position that we need to define with absolute value in order to make it animatable. So, define the absolute position along with 0 value for the top and specify 100% width.

.congrats h1 {
  transform-origin: 50% 50%;
  font-size: 50px;
  font-family: 'Sigmar One', cursive;
  cursor: pointer;
  z-index: 2;
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
}

The "blob" class is the container element for a star icon. Define the 50px value for both height and width property. Similarly, define the color, position, top, left, and z-index value. Initially, we need to hide stars and we’ll display them when text shaking animation is revealed. So, use the CSS display property with none value to hide the stars container.

.blob {
  height: 50px;
  width: 50px;
  color: #ffcc00;
  position: absolute;
  top: 45%;
  left: 45%;
  z-index: 1;
  font-size: 30px;
  display: none;
}

Finally, add the following jQuery function that will shake the text and burst the stars animation.

// Click "Congratulations!" to play animation
$(function() {
	var numberOfStars = 20;
	for (var i = 0; i < numberOfStars; i++) {
	  $('.congrats').append('<div class="blob fa fa-star ' + i + '"></div>');
	}	
	animateText();
	animateBlobs();
});

$('.congrats').click(function() {
	reset();
	animateText();
	animateBlobs();
});

function reset() {
	$.each($('.blob'), function(i) {
		TweenMax.set($(this), { x: 0, y: 0, opacity: 1 });
	});
	TweenMax.set($('h1'), { scale: 1, opacity: 1, rotation: 0 });
}
function animateText() {
		TweenMax.from($('.congrats h1'), 0.8, {
		scale: 0.4,
		opacity: 0,
		rotation: 15,
		ease: Back.easeOut.config(4),
	});
}
function animateBlobs() {
	
	var xSeed = _.random(350, 380);
	var ySeed = _.random(120, 170);
	$.each($('.blob'), function(i) {
		var $blob = $(this);
		var speed = _.random(1, 5);
		var rotation = _.random(5, 100);
		var scale = _.random(0.8, 1.5);
		var x = _.random(-xSeed, xSeed);
		var y = _.random(-ySeed, ySeed);

		TweenMax.to($blob, speed, {
			x: x,
			y: y,
			ease: Power1.easeOut,
			opacity: 0,
			rotation: rotation,
			scale: scale,
			onStartParams: [$blob],
			onStart: function($element) {
				$element.css('display', 'block');
			},
			onCompleteParams: [$blob],
			onComplete: function($element) {
				$element.css('display', 'none');
			}
		});
	});
}

That’s all! I hope you have successfully integrated this “Congratulations” text animation into your project. If you have any questions or suggestions, let me know by comment below.