SVG Animations not Finished Yet

So here I was thinking that the animations I did yesterday were all done. What happens when I go to watch it on chrome? it gives me epilepsy!  both SVG’s have decided to strobe before they start to draw the shapes.  After commenting out each JS line one by one I determined that it has something to do with the store-dasharray, which of course makes the whole ‘drawing’ thing possible.

So I went digging in google and I found an article that talked about how to animate a stroke using the same method I used. I scrolled down to the comments to see if anyone else had had a simlar problem and it turns out that I found a comment that said you had to add

@webkit-keyframes {

}

and

-webkit-animaton:;

to  your code for the animation to work in chrome. However when I added it to my code it didn’t do anything to solve my problem.  Then Fae (the genius),  had a look at it and found that it was the syntax of the transitions I used

it should have just been:

transition:fill-opacity 3s;

rather than

transition:all 3s

as the ‘all’ in the transition implied that the 3s transition applied to every element on the page rather than just the one element that I wanted to have a smooth transition.  After that all I had to do was change the transition properties in the rest of the document and it functioned exactly the way I wanted it to.

Style Guide

Creating a pretty but practical design seems easy but for me I found that I send far too much time designing a style guide that I needed for this last assessment.

Gaining inspiration for my contents page from this image I started designing the rest of my style guide following the SAE style guide.

I don’t know if its an entirely practical contents page but it looks cool so I was happy with it.

In terms of  content in this style guide we were required to look at the logo, logo size, logo do’s and don’ts, colour scheme, keywords, tone and voice and styles.What are styles I here you ask? well I have no clue. But I was given the SAE style guide to look at for inspiration which is where most of the knowledge of content came from as well. In this respect the style guide is lacking as I feel there could have been better content written about certain areas such as the styles,  tone and voice and keywords as I was not really sure what to write in them in the first place.

The overall project went well though as I finished the layout of the website and am just waiting on content from the client, that however is coming at the end of July so there will be a bit of a wait of that. I met up with her a few days ago and she said that she was very happy with the redesign, but she wanted to keep her old logo only for the fact that they would have had to reprint all business cards and letter heads again. Which was promising for my logo in itself I suppose.

For future style guides I now know what keywords and tone and voice are which I plan to implement in my next assessment.

SVG Animations

I had this grand idea for the Dinfosec website to have the first thing  the user sees is a blury photo and an open lock that when the click on would animate and draw a closed lock then fade away to display the rest of the website. When I thought of this idea originally I was thinking that the users would have a sense of security (pun intended) and reinforce the idea that there information will be safe with this company.

To start of I started researching animation in web development and found a really cool API called Canvas. It was similar to Javascript in its syntax but it was solely designed for pixel manipulation and works with x and y coordinates. After spending about 6 hours trying to understand how the whole thing worked It was suggested that I look into using SVG animations instead as it was more suited to what I was trying to do.

For this I started looking at different libraries with similar SVG animations to the one I wanted for the logo animation. I found 2 potential libraries. The first was Vivus.js,  this library worked by first triggering an animation of strokes and then filling it. It also gave a number of different SVG animations that all drew the object onto the screen but in different ways. It seemed easy to implement as well however when I downloaded the files and tested it on my logo the only thing that drew itself was the lock and it didn’t draw it the way I wanted it to. I found out that the other parts wouldn’t work because this library only worked with strokes which was not exactly I was looking for so I  decided to keep looking and Vivus.js would be a back up if I couldn’t find any others.

The second SVG library I found was called Draw Fill SVG by a blogger called ‘call me nick’. his animation was designed to draw the stroke and then fade in the fill. This is exactly what I wanted so I happily downloaded the source and followed the instructions to set the animation up and then pasted in my SVG. Unsurprisingly it did absolutely nothing. So fiddled around with it for a while, re-read the instructions and found that I hadn’t added a particular Modernizr.js file so just incase I put every file in the documentation into the file to make sure I didn’t miss anything and the animation still wouldn’t work because it still didn’t pick up that Modernizr was a function. After I copy and pasted the original animation word for word and inserted my SVG the Modernizr problem went away but another JSON problem appeared. The original file had the same problem and it still worked so I didn’t understand why mine wouldn’t.

 

Fae found another SVG animation method  using CSS that I could use to do exactly what Draw Fill SVG was doing using the CSS properties of stroke-dashoffset and stroke-dasharray. The stroke-dashoffset specifies the length between dashes in a stroke pattern. stroke-dasharray controls the pattern of dashes and gaps used to stroke paths. which ultimately creates an animation that looks like the strokes are moving. Yay half way there! next I had to make the fill appear after the animation had finished drawing the logo.

In order for the lock to be a different colour to the rest of the logo I had to create another class that designated the specific colour to that specific area. This the grant scheme of things was easy to do. In order to make the fill come into play I fiddled with the fill property and made it fill out with opacity and transitions to ease in. Of course since everything else was now working the transitions didn’t work. It was only after I put it on the main animation controller class that it faded nicely instead of just appearing after the the animation was finished. In order for the fill to ease in after the animation I had to use a function called setTimeout (function() {…. }time in milliseconds); which tells the computer that after a certain amount of time the do something in this case fill out the logo.

After that the lock was simple I just copied and pasted the code from the logo SVG and changed the paths around so that they would draw the way I wanted them to and wala done!

I’m very happy with end results for both the logo animation and the lock I’m not sure that once they are beside each other that the whole thing may look to much but fingers crossed it’s not.

Hamburger Menu Trials

Trying to find the perfect hamburger menu for a website can be a trail and error scenario. I myself love the ones that seem to draw themselves for move when you click on them. I found this really cool one on code pen that when you clicked on it slided the hamburger into a cross giving the effect that it drew itself whenever you clicked on it.  The only problem with it was its size and changing that was more challenging than I thought it would be.

So the way this menu was set up was by putting divs within divs, nothing new I know, so I thought if I changed the width of the outside container that the whole thing would just shrink, not the case. The only thing it did was put the cross out of alignment. So then I changed the width of the individual spans on the menu which seemed to work for the hamburger part of the menu but the cross was way out of alignment which made it look more like a broken boat sail. I figured out that the cross was rotated and therefore it had the opposite CSS properties to the hamburger spans. Knowing this it was easier to understand why the CSS modified the height of the cross spans instead.

Once I had finally managed to change the size of the menu all I had to do was position it as the edge of the screen and change the colour of the cross. The colour change was easy as all I had to do was change the background-colour of both of the cross spans. The position change was a little fiddly because I had to figure out how the menu was initially positioned in the first place. It turns out that the position is set in three different places first is the position on the outside box then there is a position on the hamburger spans and a third position on the cross spans. In hindsight I could have probably made my own hamburger menu that was less complicated and the effect that this one has why the use clicks on it is so worth it.

Once the hamburger menu was all sorted I had to fix a problem that I have been having for a while now and that was when I used the menu and then scaled out to a laptop or desktop size the navigation would not appear as it should have, instead  it was keeping the CSS property of display none. To fix this it was suggested that I look at using a jQuery function that triggered a class change when the window reached a certain pixel width.

if ($(window).width() < 960) {
   ... ;
}
else {
   ... ;
}

Just like that the issue was solved. This will be the first website that I’ve done that will not have that problem.

Working with Career Advocate

For the first assessment in studio 3 we were asked to do a rebranding of a website as well as redesign it. As part of this, a detailed style guide was to accompany the website and the new branding, explaining what changes were made and why. The website I decided to rebrand and redesign was Career Advocate. Originally,  I decided to do this as the owner came to me asking if I would like to redesign their website while getting experience with a real-world client as she was looking for someone to redesign her website. Of course, I was happy to as I needed the experience when I visited the website I saw even more reason to redesign it.

For starters, the navigation bar was way too crowded and the website itself had around six different fonts in it. The website as a whole is not all that interactive with the user and the only jquery they have is on the slideshow on the homepage. As part of the redesign I wanted to give it more colour through images as the client wanted to keep the original colour scheme as aqua and white. She also wanted to keep her logo but for the purposes of this assessment, I will be rebranding it anyway and possibly changing it later to the client if she still wants to later on. The logo itself is dull and I think it could benefit from using more than just the three colours.

I really like how this logo uses different variations of the same colours in its avatar icon and I used this idea in my logo.

I decided to place their slogan at the bottom of the logo to further emphasise their values and the atmosphere they are trying to create for their clients. I also thought it would be seen better than if were just on the footer. I also used variations of the same blue colour to add life to the logo while also using the opportunity of subtly adding more colour to the website.

As part of the redesign the client wants the website to be done on WordPress so that she can add information to the website manually herself rather  having me going back and changing stuff when I need to which is a pain for me but will help in the long run as I will not be constantly having to monitor the website for the rest of my life.

This has caused me problems as I was having trouble implementing background images onto divs without the proper file path and Fae gave me a suggestion to place all of the WordPress files directly onto my htdocs folder and using it from there. This initially broke my website but after I reinstalled  Wordpress it solved the issue and in hindsight is much more practical for long-term use in the future when placing it onto a hosting server.

As far as communicating goes I have been having the same issues as I usually do the client is not responding to my emails but she originally wanted this project to be finished before the beginning of June. I have deiced to book an appointment with her and meet her at either her office or at a cafe so she can’t escape.