Category: Animation

Animated menus

adminLeave a comment

Social Media Links

I wanted to create a fixed menu to show my social media links. I found a Folding Menu by Animated Creativity that I decided to use as a template for my Social Media links.

While implementing it was fairly simple, it was not responsive, and I had to learn the code to ensure I could edit it without breaking it. This animation is done through CSS animation activated by hovering the pointer over the “FOLLOW ME” text and through some clever transition-delays. I edited the positions but left the animation itself largely alone as it was exactly what I wanted.

Main Menu

Original menu for portfolio
Original menu

For the main menu, I wasn’t sure what I wanted. I wanted a similar line based menu animation but a simple hover effect was boring. The original menu looked like the image above. There were no colour animations (menaing the active menu just stayed blue) and the hover effect simply duplicated the blue colour gradient to the other menu items.

This is the first time I tried animating with the hover effect, so I used the code in the pen Magic Line Navbar by seto89 to figure out the timing and syntax needed. I also added some text and a photo to make it look like an about page to make sure the spacing looked right. I just duplicated the about page so what we could see the menu difference when it was active on other pages.

I decided to code my style first and then add this animation to my menu. I only added the line animation from the pen as I couldn’t figure out how to recreate it myself. I also believe it will break in any browser other than Chrome. From this point I decided I needed to animate the colour to replicate the background colours and got it to work. I also tried to get the animated to line to be on the top and bottom, but I can either get to work on top or on the bottom. From this point all I had to do was make the menu responsive. This was tricky as the animation tended to stop working if you fiddle with it. In the end I left it at the bottom as it still looked cool and I feel like it will break I fiddle too much with it. My goal for the end of the year is to have this animation working on all browsers on the top and the bottom the menu.

To download the file, click here.

References

Animated Creativity, na. CSS – Folding menu | Codepen. [Online]
Available at: https://codepen.io/animatedcreativity/pen/wOqBQr
[Accessed 21 10 2019].

seto89, na. Pure CSS Magic Line Navbar | Codepen. [Online]
Available at: https://codepen.io/seto89/pen/WmGwwp
[Accessed 21 10 2019].

Elective 2 Continuation of CCS animations

adminLeave a comment
Moon reflection on water created to animate
Moon reflection on water created to animate

In this elective I decided to animate a illustration using CSS animation. I decided to do a reflection of the moon on water. I used a flat illustration style as it would be the easiest to animate simpler shapes. I made this illustration in Adobe Illustrator.

Showing the SVG code of a section in the image
SVG code of the star

To build the image in code, I exported the image in sections in SVG format and placed them in position on top of a gradient made with code. I then copied the text into the code. This means when I scale the image, it will scale as a vector in the browser itself. For example, the image above shows the code of the star in the yellow circle. The text in the yellow square is the code that makes the star image. If you zoom in on your browser on where you have the file open, it means the image will not pixelate at all. Additionally, the file size is very small. In total, the size of the animated drawing is about 43KB. To compare, the recording below with 4 seconds that would repeat is about 500KB. With larger websites with many animations, the smaller file size can literally save money as file space and download speed is reduced significantly.

Animated moon reflection

As for actual animation itself, I used the Scale and Translate 2D transformations from the Elective 1 CSS animations. The way it works is that you designate a animation duration for a certain amount of seconds, and specify what the animation would look like through keyframes. I use percentages to select my keyframes as I feel it is the option that makes more sense. In the keyframes I selected a beginning frame, a middle frame and a end frame. The beginning frame and the end frame are the same to ensure that the animation does not look like it is glitching.

This is a simple animation, but this entire image was made with code. Getting the timing and movements right took time. But I am proud of this animation as it was my first illustrated animation made only with code.

To download the file, click here.

Elective 1 CSS animations

adminLeave a comment

This learning unit is about learning a new skill. I decided to work on CSS animations and made a page on the basic transitions and transformations you can do to divs. This page is more of a reference guide summarizing what I learned from online resources rather than a visual solution but I feel like I got the basics down. I would like to make a reference to w3schools as I used a lot of the text from the site. Also, I want to reference the site called CSS tricks for animation count down as I used a tutorial to learn how the code works.

You can see this document as process work where I tested a bunch of code I found online in a way that would make sense to me in the future. I do have to admit that I am probably the only person who would be able to make sense of it without context as a lot of the explanations are done with notes in the code itself if I felt it was necessary. It also has the basic functions down so I only have to use the Inspect browser function to see what I did to reuse the code in the future.

As for the actual content, it includes:

  • Transitions – which affects the speed at which animations happen.
  • Animations – this is the function that actually makes the animation happen
  • 2D/3D Transforms – which is a overview of how the animations would work and look like
  • Perspective – to show how one would change the perspective of a object with code
  • SVG (Scalable Vector Graphic) – a file type for vector images that allows you to directly affect the code. It is also commonly used in animations as it is one of the smallest file sizes.
  • SVG Animation – followed an online tutorial to learn more about the code. This animation is done by moving the nodes you use to make the image. Thus you need to ensure you have the same number of nodes in every image to make the animation work.

One thing I learned through this is the amount of effort that goes into making animations accessible across different browsers. The code I wrote works in Chrome. Browser support is specific syntax that allows your site animations to work on multiple browsers. To learn more about Browser Support click here.

To show the animations I used Xbox live screen recording to make the video.

Click here to download the original practice file.

References

CSS-Tricks, 2015. A Guide to SVG Animations (SMIL). [Online]
Available at: https://css-tricks.com/guide-svg-animations-smil/
[Accessed 21 10 2019].

W3Schools, 2019. CSS 2D Transforms. [Online]
Available at: https://www.w3schools.com/css/css3_2dtransforms.asp
[Accessed 21 10 2019].

W3Schools, 2019. CSS 3D Transforms. [Online]
Available at: https://www.w3schools.com/css/css3_3dtransforms.asp
[Accessed 21 10 2019].

W3Schools, 2019. CSS Animations. [Online]
Available at: https://www.w3schools.com/css/css3_animations.asp
[Accessed 21 10 20191].

2D vs 3D animation

adminLeave a comment

The most renown difference between 2D and 3D is the result that people see. For example, in the photo below the first examples are from Tegami Bachi of Pierrot studios. For 3D examples I will be looking at How to train your dragon: The hidden world.

Divine, (2011), tegami bachi reverse 25 end [ONLINE]. Available at: https://randomc.net/2011/03/26/tegami-bachi-reverse-25-end/ [Accessed 21 February 2019].
Dreamworks Animation, (2018), Hiddenworld [ONLINE]. Available at: https://www.howtotrainyourdragon.com/ [Accessed 21 February 2019].

The most renown difference between 2D and 3D is the result that people see. For example, in the photo below the first examples are from Tegami Bachi and Bleach of Pierrot studios. For 3D examples I will be looking at How to train your dragon: The hidden world.

From the above image you can easily see the difference in dimension, specifically called depth. While in 2D animation you can create immersive worlds, it is usually made via using art techniques such as illusion and placement but is still only made through ‘faking it’. Essentially 2D artists draw the scenes with various software and tools. In 3D another dimension is added that is far more immersive compared to 2D animation. It is done through modelling where they create the character and ‘rig’ it into a puppet. This process means that characters are far more lifelike. Geometry, textures and physics are replicated based on reality.

Both styles have their pros and cons. For example:

  • 2D animation is more forgiving. If you need a character to stay still, it won’t attract as much attention where in 3D animation you are forced to ensure a character is moving a little to prevent it from looking dead.
  • 2D animation will never be as realistic as 3D animation.
  • 2D animation style may change depending on the artist, where 3D modelling prevents this through the use of modelling.

Refined animation showreel

adminLeave a comment

I think I did fairly well with the animations. I probably will go and do more animations later on to replace the walk cycles and homer at the end, but I feel that this is a good show reel for what I accomplished in my second year. These were my first attempts at animation, and I believe they need to be acknowledged. I had a lot of fun doing this show reel. It felt like going down memory lane. The only thing I changed was the speed and duration of the animations to the lyrics of the song. This is also one of my favourite artists, ironically who I listened to while working on a lot of my work.

The song is Oh Glory by Panic! at the Disco.

The reasoning behind the order is one part to fit the song and the other because it reminds we of the sequence we made them in. Originally, I wanted to end with my stop-motions since they were the best executed but the stars popping up fit the song so perfectly. The second stop-motion flowed more naturally after the first one. The Rotoscoping one fit the beat of the third part of the song very well. The walk cycles are there to remind me of what we did, because we did a lot of walk cycles. Homer at the end feels like saying “Yay, it’s the end!” just for the fun of it. It feels like a personal narrative my year.

Week 20 Animation

adminLeave a comment

Line animation

This day was all about learning how to animate lines. We played around with the things you can do with lines and how to import illustrator files. We did an exercise where we had to make it look like we drew in Homer Simpson with after effects. Mine has a double line that gave it an interesting effect.

Week 23 Animation

adminLeave a comment

We continued with Lip Syncing. This week we had an guest lecture with Karabo on Adobe Audition to record our own sound and recorded our sound for the Lip syncing exercise. This is one of the most awkward things to do. Especially when you know you can’t sing… I have such a monotone voice, even when I try.

I give up. Even auto tune couldn’t make it sound fine. I did add the most normal audio here, but I cringe every time I try to animate to it.

Week 18-19 Animation

adminLeave a comment

Lip Syncing

In these classes we started learning about after effects templates and how you can set up templates to make animating repeating things easier such as lips in a scene.

We looked at the basics of lip syncing and different ways people do so. We also looked at different styles and fundamentals. I am going to use this image as a guide since I felt it would fit the character and is easy to understand.

Set of Character Lip-Sync. Lip-Sync - Mouth reference. Set the provisions of the mouth when pronouncing the different sounds. Best for animate characters in motion design projects.

I set up an After effects template with these lips. I just have to sync it.

This was one of most annoying things that I have ever had to animate. While the slider does make the initial animation faster, you have to ensure the keyframe interpolation is on hold. Then you cannot move bunches of keyframes or they all change, then you have to go and fix everything. Finally, any background animations make the sounds glitch out and turn weird (I still don’t get how that even happens since I locked the layer). I had to redo this little animation so many times… Again, hindsight sucks.

Download working files of Lip syncing exercise

The credit for the the song goes to R. Kelly