Material Design Lite How to Create an Interactive Animated SVG Drum Kit A tutorial on how to create an animated and interactive SVG drum kit with GSAP and jQuery. View demo Download source Today we’re going to create an animated SVG drum kit that can be played by clicking, tapping or using your keyboard, and that can also be programmed to play by itself! We’ll be making use of GreenSock’s TweenMax animation library, jQuery and the <audio> element. Creating the SVG Open your vector editing software of choice (I used Adobe Illustrator but there are many alternatives to choose from, such as Affinity Designer, Sketch or Inkscape) and get drawing! <g> is Key “The g element is a container used to group other SVG elements. The key part of this for us is “Transformations applied to the g element are performed on all of its child elements” this will come in very handy when animating our SVG, e.g. instead of applying animations to each individual component of the snare drum, we can simply group the elements we want to animate and apply a single animation to that group.
How To Be More Organized While Designing UI How To Be More Organized While Designing UI After working 4 years in the field of digital design I got obsessed with tidying up and sorting information. This lead to the creation of a systematic approach for designing user interfaces. It is an object-oriented, programming-inspired approach, a collection of various ideas that are universal. This approach is used mainly at a later designing stage, usually during finetuning of the project when you have more time to think about the relationships in your visual system. Of course, the general idea of visual collections and their application into the design process is old news. My Intentions Are Pure While working on larger-scale projects I got fed up with the troublesome designing process in Sketch because of the lack of structure. Clear Overview Of Variables Grouping Of Styles Which parts of the design are linked with certain changes in variables? Pairings of Variables Changing Only One Variable Basic Principles Everything Is An Object Fonts Colors