srodvasquez (5)

Music Kombat
posted to Share by srodvasquez

@Anthony_Tonev Hmm ... well so far I only animated vector illustrations for video purposes rather than website design (hence the use of Media Encoder). From what I can gather, Adobe Animate appears to be a more suitable program to produce svg animations for web-based projects although I haven't tested it myself.

In terms of importing svg in AE, I too suffered from that problem until recently when I acquired Illustrator. Previously, I would ask a friend to convert the svg to ai; however, it slows down production whenever I needed to alter the vector graphic and thus have to send it back to my friend to convert. Later I realized I could export the vector graphic as pdf (with components in separate pages), which AE supports, and animate that instead. Now with Illustrator I no longer have to go through those extra steps which is a HUGE time saver.

Looking into Greensock.js, the library seems promising for constructing rather complex scenes. And heck, even simple animations when used in conjunction with other graphical elements could produce intriguing sites to wow one's visitors. I'm sure that if you decide to utilize the library you could produce stunning and interactive animations like what you did for your Music Box Editor (you did a fantastic job by the way; it's actually quite fun).

Music Kombat
posted to Share by srodvasquez

@Anthony_Tonev Of course! I design and prepare all of my vector illustrations in Adobe Illustrator, which includes separating its components into layers (makes animating easier). From there, I import the ai file into Adobe After Effects (no need to export to svg since AE supports the ai format) and place them in the main composition.

Quick Note: If the intended animation is sufficiently complex and isolated, I place it in a precomp instead to declutter the timeline panel and improve speed (my pc isn't really meant to handle such a resource-intensive program).

Generally, I animate the vector illustrations via the expression editor since it provides a finer control over transformations. Occasionally if the movement is brief or I need a rough sketch of the animation, I instead opt to use the graph editor since it's more visually intuitive (although, at the expense of precision).

Finally, I import the animation file into Adobe Media Encoder to export into any format I may require.

Music Kombat
posted to Share by srodvasquez

@AlephZero Thank you! I usually only design and animate vector graphics so this project was definitely a fun learning experience trying to create raster graphics. I was kinda worried that the character animations would look too unnatural but it turned out okay to my liking.