Web_Designer_UK__May_2018

Tutorials
Code a dynamic SVG radial menu
GSAP animations
The GSAP animation library is simple
yet extremely powerful. The library
gives us a really simple syntax and
handles all of the complex calculations
under the hood for us. In its simplest
form the library allows us to create
timelines and then add animations to
these timelines. This concept will be
familiar if you’ve used Flash or any
other animation GUI.
var tl = new timelineLite();
Once we have created a timeline we
can create an animation to add to it.
The example below will animate the
‘circle’ element from a scale of ‘0’ to
its original scale, over the duration of
one second. We’re also providing the
delay and start times of ‘0’ although
this isn’t required as they are the
default values.
tl.from(
‘circle’, 1, {
scale:’0’
}, 0, 0
);
The library also has a number of more
complicated functions we can use
like the staggerTo and staggerFrom
functions, which allow us to animate a
number of elements one after another,
as well as a number of paid plugins for
really specific uses.
The library is performant and
handles much of the browser
compatibility issues you would run into
making it ideal for production.
14. Outside layer else logic
In the last step we created the logic for when the home
menu was not already open, so here we create the
opposite logic. We need to make sure to update the
variables to ensure we can keep track of the menu’s state.
We also play the ‘animate_outside’ timeline in reverse
when clicking the main menu button.
else {
homeOpen = false;
outsideCircleOpen = false;
animate_outside.reverse();
}
http://srt.lt/zDcYw
15. Animate the
home menu buttons
We now need to create a new timeline for our home
menu buttons and change the initial play state to paused.
We can utilise GSAP’s ‘staggerFrom’ function to apply the
same animation to the buttons, one at a time, with a given
delay between each iteration.
var animate_home = new TimelineLite({paused:
true});
animate_home
.staggerFrom(“.home-menu g”, 0.5, {
transformOrigin:”50% 50%”,
opacity: “0”,
scale: “0”
}, 0.125, 0.25)
;
http://srt.lt/q1SyG
16. Add animations to
click functions
We’ve created our home button’s timeline so we now
need to update our click function to include playing and
reversing the animation when the home button is clicked.
$(‘.home-button’).click(function() {
if(homeOpen == false) {
...
animate_home.play();
} else {
...
animate_home.reverse();
}
});
http://srt.lt/qC2B5s
17. More menu
We now need to do exactly the same for the More menu
by creating a click function and staggered animation
timeline for the menu and its buttons. We also need
to update the menu state variables within each of our
click functions.
http://srt.lt/i3rT
18. Settings and FAQ menu
As you may have guessed we need to repeat the same
thing for both the Settings and FAQ menus. Remember to
add the menu state variables to each of the layers and
play the animation timelines in reverse.
http://srt.lt/x5wTx
19. Almost finished
We now have all of the animations being triggered and
played, or reversed given the appropriate click on the
middle layer. We need to make sure all of the animations
are reversed and the state variables updated when the
main menu is clicked and is already open.
$(‘.main-menu’).click(function() {
animate_middle.reverse();
animate_outside.reverse();
...
menuOpen = false;
outsideCircleOpen = false;
homeOpen = false;
...
});
http://srt.lt/Bk2Hz4
20. Active states — middle layer
That’s all of our animations and click functions created –
the only thing left to do is to add the ‘is-active’ class to the
button that has been clicked. jQuery allows us to use
advanced CSS selectors to first listen for any click to
buttons in the middle layer and then to remove the class
from all the other buttons.
$(‘.middle-layer [class*=”-button”]’).
click(function(){
$(‘.middle-layer [class*=”-button”]’).
removeClass(‘is-active’);
$(‘.outside-layer [class*=”-button”]’).
removeClass(‘is-active’);
$(this).addClass(‘is-active’);
});
http://srt.lt/T8Z3f5
21. Active states — outside layer
We now do the same thing for the buttons on the outside
layer, targeting, removing and adding our active class to
the clicked button. That’s it, our radial menu, created with
SVG, animated with GSAP and coded with jQuery is
finished. The animations are simple yet effective and the
active states and hover interactions allow the user to keep
track of their place in the menu.
$(‘.outside-layer [class*=”-button”]’).
click(function(){
$(‘.outside-layer [class*=”-button”]’).
removeClass(‘is-active’);
$(this).addClass(‘is-active’);
});
http://srt.lt/k9Gj1x
Collection of tutorial pens - http://srt.lt/AmTp
tutorial _________________________________________________55