7 months ago


Tutorials Code a dynamic

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) ; 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) ; 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. 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) ; 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; 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) { ...; menuOpen = true; } }); 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; } 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; 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) {; } outsideCircleOpen = true; homeOpen = true; } } ); 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

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(); } 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) ; 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) { ...; } else { ... animate_home.reverse(); } }); 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. 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. 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; ... }); 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’); }); 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’); }); Collection of tutorial pens - tutorial _________________________________________________55