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