Bubbling Text Background in Angular 10

Bubbling Text Background in Angular 10

If you want to add animations on your website, JavaScript has a great deal of libraries that can help. However, this article focuses on adding animations in angular so you have to do things the angular way. This means one thing: importing JS libraries is not so easy (or recommended) so I set myself up for a task, I wanted to build one colossal npm package of my own that contains a lot of the animations we see in JS (as well as new ones of course). For now, I’ll just start with one of those packages. An angular 10 directive for floating text background animation. Bubbling Text Background in Angular 10

If you want to add animations on your website, JavaScript has a great deal of libraries that can help. However, this article focuses on adding animations in angular so you have to do things the angular way. This means one thing: importing JS libraries is not so easy (or recommended) so I set myself up for a task, I wanted to build one colossal npm package of my own that contains a lot of the animations we see in JS (as well as new ones of course). For now, I’ll just start with one of those packages.

Please note: If you want to take the easy road here then you can skip this article and just click my  easy-to-use solution. If you’re having problems you can find a demo in there also.

Humble Beginnings

It started when I was building my website. I got a notepad (a real one), drew my basic elements, sections, etc., then I got an idea. I want people to dive into my website so I thought of the ocean. When you dive into water you see all of the bubbles around you so I wanted floating bubbles to appear in the background of my site to emulate that experience. But that wasn’t enough for me, I’m a developer! I’m not taking people scuba-diving, I’m taking them to my world — the World Wide Web so my site shouldn’t have air bubbles in it, it should have text bubbling in it!

The only problem was that I wasn’t sure how to go about this, so I did what any sane person would do- I Googled it of course. I figured that someone must have tried this idea out before and I was right; someone had. Meet Gleb, he was the mastermind behind the realisation of my dream. Great, I had found my guy but there was a problem problem — he had created his animation in AngularJS.

So I talked to him and he gave me permission to upgrade everything to angular 10.

Getting Started

If you want to know how to do this yourself then you’ve come to the right place. Let’s Start. The first thing you need is an Angular app (this article assumes that you know how to create this). I wanted a directive so that I could inject it everywhere to any element and possibly control a few things dynamically.

text angular bubble animation

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Angular Animations: How to Use Angular 10 Animation

Animations, in general, provide the illusion of motion: HTML elements change styling over time. Animations in Angular can improve your app and user experience in several ways: Without using animations, web page transitions can seem abrupt and jarring. Motion drastically enhances the user experience, so animations give users the chance to detect the application’s response to their actions. Good animations intuitively call a user’s attention to where it is needed.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular Animations: Create a card flip animation

In this article, I’m going to explain how I created a card component used in the game which flips to reveal the front side when you tap it. We’re going to learn a bit about 3D in CSS coupled with angular animations so we can get the following desired effect!

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.