Web_Designer_UK__May_2018

Tutorials
There’s so much that can be achieved
natively in the browser using CSS3 or the
Web Radial menus. It’s something we’ve
seen used on the web before, mainly
back in the days of Adobe Flash — although recently
implementations in JS and/or Canvas have been
spotted in the wild — but they’re often seen in software
used on touch screens. We’ll be creating our very own
radial menu but we’ll be using SVG for the drawing and
jQuery and GSAP to handle the interaction and animation.
SVG is perfect for these kinds of elements due to its
navigable DOM and responsive nature. We can capitalise
on these properties to create a complete user interface
(UI) or specific parts of a UI — such as a menu.
The idea behind our radial menu is that each circular
layer would be revealed when the layer before is
interacted with. The menu contains three layers; the first
layer is the menu button in the middle; the second
consists of four icons; and the final layer contains three
buttons for each of the four buttons found on the
previous layer.
We’ll be creating the design in a graphics editor (this
example was created in Sketch) but you can use any
vector drawing program that exports to SVG.
1. Design the menu
The first step is to create a design for the menu using a
graphics editor. The grouping of elements here is
important as we need to create all of the layers we’ll need
later for the reveal process. The circular backgrounds on
the icons are the hover states and the hit area for each
button. Once complete we need to export the SVG file.
Check out the code snippets here: http://srt.lt/c0H1.
2. Create our first timeline
GSAP offers two timeline types: TimelineLite and
TimelineMax. The ‘max’ version offers us access to
additional features such as the ability to repeat
animations, as well as playing them in reverse among
other features. Our first timeline will be the water which
we will repeat infinitely and yo-yo back and forth.
var animation_water = new TimelineMax({
repeat: -1,
yoyo: true
});
http://srt.lt/D9rN0m
3. Container styles
Next we’ll create a new pen on CodePen and paste our
optimised SVG code into the HTML editor. We’ll wrap a
container div around the SVG and provide some simple
styles to position and size the container, as well as
applying the background image.
.container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 100vw;
min-height: 100vh;
...
}
http://srt.lt/k7EeS
4. SVG styles
Next we’ll add a class to our SVG and provide some
simple styles to control the size of the menu.
.menu {
width: 100%;
height: auto;
max-width: 792px;
max-height: 100%;
}
http://srt.lt/zYcA4c
5. Hover and active states
We can use CSS to create our hover states and use a class
name of ‘is-active’ to control the basic interaction. We’ll
change the cursor to a pointer and change the opacity of
background circles. We will also add some similar styles to
the main button in centre.
[class$=”-button”] {
cursor: pointer;
circle {
opacity: 0;
transition: opacity 250ms;
&:hover {
opacity: 0.6;
} } }
http://srt.lt/RtXn
6. JavaScript
For the remainder of the interaction we’ll need to turn to
JavaScript. Make sure you’ve included the GSAP and
jQuery libraries, so we can create our first timeline and
animation. We’re going to animate the middle layer of
buttonsfromascaleof‘0’toitsoriginalsize.
Accessibility
The code we are writing for this demo is meant as
an example of creating interactive SVGs. The code
is not accessible and shouldn’t be used for
production without modification.
Left
Create the design using a vector graphics editor such as
Sketch for Mac
Top
Using CSS we’ve provided a simple interaction when the
buttons are hovered over
tutorial _________________________________________________53