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
