Web_Designer_UK__May_2018

Tutorials
Code a dynamic SVG radial menu
var animate_middle = new TimelineLite();
animate_middle
.from(“.middle-layer”, 0.5, {
transformOrigin:”50% 50%”,
scale: “0”
}, 0, 0)
;
http://srt.lt/kLc8M
7. Spin and fade in the icons
The GSAP library allows us to layer animations onto a
single timeline. We’ll utilise this to create two more
animations to the ‘animate_middle’ timeline. We’ll add
rotation and opacity animations to the buttons of the
middle layer. The animation will now grow the circle while
spinning and fading in the icons.
animate_middle
...
.from(“.middle-layer .button-group”,
0.75, {
transformOrigin: “50% 50%”,
rotation: “-=135” }, 0, 0)
.from(“middle-layer .button-group”,
0.5, {
opacity: “0” }, 0, 0)
;
http://srt.lt/YjKm5C
8. Animate the outside layer
Next we’ll create a new timeline for the outside circle. The
animation will be exactly the same as the first animation
we created to animate the inside layer. This time we won’t
be adding anything else to the timeline as we won’t
GSAP documentation
and forums
The Greensock site is an invaluable resource for
learning to utilise GSAP. The site includes learning
resources, examples and a beautiful showcase of
sites built using the library. https://greensock.com
always need to animate the buttons and circle together.
var animate_outside = new TimelineLite();
animate_outside
.from(“.outside-layer”, 0.5, {
transformOrigin:”50% 50%”,
scale: “0”
}, 0, 0)
;
http://srt.lt/S1jNa
9. Timeline play states
Now we have both of the layers animating we can update
their initial play states. This will allow us to pause the
animations until we interact with them, hiding the two
layers of buttons we’ve created animations for. We also
want to create a new variable to set the menu state.
var animate_middle = new
TimelineLite({paused: true});
var animate_outside = new
TimelineLite({paused: true});
var menuOpen = false;
http://srt.lt/ZgCi7
10. Create our first click function
Now we have our animations created and paused when
the page loads we need to create a function to trigger the
animation when the centre circle is clicked. Within our
click function we will check to see if the menu is open
using our ‘menuOpen’ variable.
$(‘.main-menu’).click(function() {
if(menuOpen == false) {
...
animate_middle.play();
menuOpen = true;
}
});
http://srt.lt/LaX0f
11. Close the first layer
In the last step we checked to see if the menu was closed,
played the animation and updated the menu state
variable. We now need to provide what happens when
the button is clicked and the menu is already open. GSAP
allows for timelines to be played in reverse so we can
have the centre layer animate back into the centre.
else {
...
animate_middle.reverse();
menuOpen = false;
}
http://srt.lt/k3Ps0A
12. Additional variables
In the same vein as the main menu button we need to
create a number of variables to keep track of the menu’s
current state. The outside layer contains four separate
menus and the circle. Here we’re creating a new variable
for each of those menus and the outside circle.
var outsideCircleOpen = false;
var homeOpen = false;
var faqOpen = false;
var settingsOpen = false;
var moreOpen = false;
http://srt.lt/kG7pW
13. Outside layer logic
We now need to create a number of click functions, so
we’ll start with the home button at the top. When we click
this button we need to check for two things; if the home
menu is already open, and then inside of that logic, if the
outside circle is already open. If the outside circle is
already open we don’t need to animate it, we can simply
animate the buttons and leave the circle open.
$(‘.home-button’).click(function() {
if(homeOpen == false) {
if(outsideCircleOpen == false) {
animate_outside.play();
}
outsideCircleOpen = true;
homeOpen = true;
}
}
);
http://srt.lt/E8tG
Top left
With our animations paused to begin with they are
hidden when the page is loaded
Top right
We’ve now created the click function to play the first
animation, revealing the first layer of buttons
Bottom left
The home buttons are now hidden due to the initial
paused state of the timeline
Bottom right
The finished product including the active states for our
buttons on each layer
54 __________________________________________________tutorial