Animated Easter eggs, or a tribute to the studio upon dismissal from it

Habré has many articles. But not everyone shows how the author thought, his rake and actions.
Here I want to tell you how I made Easter eggs for the web studio logo in which I worked.

Once, when I saw a fascinating animation from the creator of the mo-js library for svg effects, I caught fire and decided to do something similar. Just I came across an updated main page of our studio, without thinking twice, I was going to make an animation for the logo.
And since this article tells how all this happened, then to my regret I will not retell the whole manual for this library. You will have to read it yourself, if of course you want to do something like that.

Well, to immediately delve into the article:
')
→ Link to the demo view only from 1204x400, click on the bell
→ Link to GitHub

First beginnings

We all make mistakes, but we do not always understand that we are walking along a rocky path.

Initially, I wanted to break the logo into small pieces, compress them into 1 point, and only then, as a puzzle, assemble into a single whole with all sorts of effects (I think it would be beautiful). But I quickly realized that I was doing a very fast animation and of course it would be without sound. When the logo of the creator of the library, as I wrote, was "Fascinating."

I found my second inspiration in one obsessive melody ( Clannad, a song of buns ), I think many people sighed in a melancholic fit. Yes, it is just touching. And since this is a lullaby, then the subject should be matched!

The plot to invent too much and did not have to. Lullaby - “night, stars, moon”, wonderful associations, great options for the development of the plot of my Easter egg.

First of all, I found the minus of this song and cut it up to 30 seconds, this is the maximum time any guest can stand without closing the pages (I think I wouldn’t have enough myself for more). Then I made effect labels, I chose Adobe Audition CC 2017 as the most appropriate tool (to be honest, I didn’t search for another tool, it just caught my eye first).

It looked like this:



The library provides nested timelines of the TimeLine object (), I could divide everything into separate blocks, and start their animation separately. But since I had a binding to the melody, I found it necessary to do everything on a single timeline, so as not to confuse myself with the timing. I just made large blocks of arrays with a start time in the form of a delay parameter provided by the library.

Rainbow rain and letter growing

From the standpoint of the average user, the animation plot is always pretty simple. Rainbow rays fall, letters grow, a relief appears, the stars come out and the moon comes out, the finish line, you can still mess around there. But rarely anyone describes how he did it, how much he put in his strength, patience and tears of his muse.

Structurization of the code always helps to think within the framework of individual modules and I have 5 objects for manipulating the animation elements.

1. FirstRainbow

   
   The animation of the fall of the rainbow was pretty easy for me, I simply copied it from the example in the tutorial. Made an array with coordinates and described it in method 1
   
   

   rainbow(200, 500, 'A', 'str1') 

   
   where the parameters are the duration, the delay time (in my case, the beginning) of the animation and the last 2 describe the coordinate.
   
   The effect of the fall turned out to be plain:
   
   
   Hidden text

   
   
   Changed to improved:
   
   
   Hidden text

   
   
   

2. Letters

   
   Describes the animation of letters. He became the first in complexity for me object. The concept of animation was to grow like plants. I had to tinker with the letters, I think not everyone knows how to work in Illustrator (including myself). And as a person who has gained experience in this, I advise:
   
   
   • Always clean the svg code after the editor.
   • Rename classes to unique
   • Do not forget to remove extra layers.
   
   Spent 60% of the total time only for synchronization, verification of coordinates, drawing individual lines (which cannot be simulated by standard shapes). I had to change 1 parameter 20 times in order to achieve a good effect. But my inner perfectionist compromised with time and gave up.
   
   The code is simple to review:
   
   

     ...that.plant_D(800, 10111), ...that.plant_A(800, 10200), ...that.plant_R(800, 10300), ...that.plant_N(800, 10400), ...that.plant_E(800, 10500), ...that.plant_O(800, 10600), ...that.plant_S(800, 12500), ...that.plant_T(800, 13100), ...that.plant_U(800, 13400), ...that.plant_D2(800, 13700), ...that.plant_I(800, 14000), ...that.plant_O2(800, 14300) 

   
   The second thing that I encountered is my own ignorance in reading manuals, we all suffer to some degree from this. Tritely missed the point that own svg blanks should be in the resolution of 100x100 and the first letter “D” went awry. And of course, in such cases, we always make a crutch, which is what happened. I just changed its size after initialization (and since I used the Burst object, I need to change all descendants at once).
   
   

     for (let el of equal.el.children) { el.style['height'] = '180px'; } 

   
   In the future, I asked a question on GitHub, to which I was stuck on the point of the manual)
   
   Adding your own svg occurs next. in the following way:
   
   

    class elipceR2 extends mojs.CustomShape { getShape () { return '<path d="M0,120.5h13.9c39.6,0,59.6-30.6,59.1-61C73,29.8,52.8-0.2,13.3,0L0.1,0"/>'; } getLength () { return 200; } // optional } 

   
   add and use (simplicity in everything):
   
   

    mojs.addShape( 'elipceR2', elipceR2'); new mojs.Shape({ shape: 'elipceR2'}); 

   
   Or use default svg-figures.
   
   

3. MoonRise

   
   Describes the horizon, the mountains, the exit of the moon. I was busy with the moon for a long time, it was necessary to observe the style and the moon with a detailed relief did not fit here:
   
   
   Hidden text

   
   
   But, I successfully googled a better option:
   
   
   Hidden text

   
   
   a little fix file and get a wonderful moon, well suited to our style.
   
   For decency code:
   
   

     that.moon(5000, 20000), that.mountains(1500, 18500), that.horizonLine(1600, 18500), 

   
   

4. Stars

   
   The second in complexity object. Became the main source of synchronization of effects with the musical thread of the "Bun Family".
   
   I made several arrays of stars and brought them out at a given moment, simultaneously throwing them into the context of the object for further manipulations with color, size and their coordinates.
   
   Where parameters are animation time, start, and number of stars.
   
   

     that.curentStars = [ ...that.star(200, 17050, 5), ...that.star(200, 17300, 15), ...that.star(200, 17600, 25), ...that.star(200, 17900, 30), ...that.star(200, 18200, 35), ]; 

   
   Somehow I did not manage to blur the svg with the library tools, I just had to increase them. As always, the duration of the animation, its beginning, the array and the number of stars that we take randomly,
   
   

     that.shineStars(10, 21200, that.curentStars, 3); that.shineStars(10, 21600, that.curentStars, 3); that.shineStars(10, 21900, that.curentStars, 3); that.shineStars(10, 22100, that.curentStars, 4); that.shineStars(10, 22400, that.curentStars, 4); that.shineStars(10, 22700, that.curentStars, 4); that.shineStars(10, 23300, that.curentStars, 10); that.shineStars(10, 23900, that.curentStars, 15); that.shineStars(10, 24500, that.curentStars, 12); that.shineStars(10, 25150, that.curentStars, 9); that.shineStars(10, 25700, that.curentStars, 6); that.shineStars(10, 26300, that.curentStars, 7); that.shineStars(10, 26600, that.curentStars, 4); that.shineStars(10, 27200, that.curentStars, 8); that.shineStars(10, 28170, that.curentStars, 3); 

   
   incidentally throwing in the property for the fall of this.curRimShineStar.
   
   It turned out that if you choose stars randomly, there are moments when a star has a very small distance to the coordinate to which it should have started moving. And as a result, I just saw a falling point. By filtering the array by coordinates in the right zone, I achieved a longer animation and showing the tail behind the star.
   
   

     that.shootingStar(500, 29600, {y: 52, x: PARAMS.COORDINATES_X.str1.D}); that.shootingStar(500, 29800, {y: 52, x: PARAMS.COORDINATES_X.str1.A}); that.shootingStar(500, 30100, {y: 52, x: PARAMS.COORDINATES_X.str1.R[0]}); that.shootingStar(500, 30400, {y: 52, x: PARAMS.COORDINATES_X.str1.N[0]}); that.shootingStar(500, 30700, {y: 52, x: PARAMS.COORDINATES_X.str1.N[1]}); that.shootingStar(500, 31070, {y: 52, x: PARAMS.COORDINATES_X.str1.E}); that.shootingStar(500, 31370, {y: 52, x: PARAMS.COORDINATES_X.str1.O}); 

   
   The lack of some details on the location of the parameters in the objects was very upset, but everything was decided by banal outputting it to the console and reading the source code (a long but always guaranteed result). I needed to know when the object completed its animation after all the manipulations with it and I did not immediately understand that the Object.timeline._props.time property showed it, initially I was looking for it in Object._o
   
   Where I, of course, fiddled in the code, for which it is difficult to forgive myself. But in general, the animation was great.
   
   

5. PointsTimer

   
   So that the guest could turn the slider and see for himself how it happened, we had to add a timer that completed the animation after a couple of seconds of idleness. Then my fantasy is over and I just added 3 decreasing circles. After which, using the same jQuery.animate (), we dissolve the letters in the logo and remove all the tags that the library added.
   

Unfortunately, the library can not do very long animations, it can be seen, there is a jerk to the side very quickly, you will see how everything goes in pieces, where there will be elements, where it is not. I think this can be solved only by the forced manipulation of the speed of the slider.