My Initial idea for my website was to have a clean and minimal design which would only show my work as the main centre of focus. I felt like this was all right, but I still kept wondering if I could add anything more to show my skills. Being confined within limitations, I had to come up with a creative solution. I came up with the idea to animate my logo.
Easier said than done. I actually didn't have a clue of what I would want to tell/show through my animation. I jumped straight in After Effects and made a simple slide animation with my first name(BAS) and came out all right, nothing spectacular, just all right. The benefit of a simple animation is that it is not distracting the viewer from the content of my site. But it also doesn't translate any creative depth in my animation.
I wanted to tell more through animation. The bounciness of the first try inspired me to think of my first name(BAS) as a rubber band that wants to snap to its original state and pull itself out again. So, I re-used the previous composition, but now I had to make the animated points on the 'B' bounce and wiggle. I had no idea how to do that, I could only imagine that I had to, connect the points from the 'B'-shape to Null objects, that could then be animated. And after a quick Google search, I discovered that there is actually a script in After Effects that is specifically designed for this. The script is called 'Create Nulls From Paths'. It creates a Null object for every point on the 'B'-shape, which offers you the ability to select the desired Nulls and parent them on to another Null. With this Null, you can make any animation you like.
Although I had achieved a kind of rubber-like animation, it still didn't felt like a rubber band. The main problem was that I had separated the first name letters from each other, so I could animate them individually. But a rubber band is just a solid, one-piece object. To correct this I just began from scratch, so I could animate the full first name. What resulted in a more realistic rubber band pull and snap, added a small warp effect for a slight squeeze in the middle.
After I was satisfied with the animation, I exported the animation with GifGun for web-friendly usage.