If you’ve ever coded an animation that’s longer than 10 seconds with dozens or even hundreds of choreographed elements, you know how challenging it can be to avoid the dreaded “wall of code”. Worse yet, editing an animation that was built by someone else (or even yourself 2 months ago) can be nightmarish. <\/p>\n
In these videos, I’ll show you the techniques that the pros use keep their code clean, manageable, and easy to revise. Scripted animation provides you the opportunity to create animations that are incredibly dynamic and flexible. My goal is for you to have fun<\/strong> without getting bogged down by the process.<\/p>\n We’ll be using GSAP<\/a> for all the animation. If you haven’t used it yet, you’ll quickly see why it’s so popular – the workflow benefits are substantial. <\/p>\n <\/p>\n See the Pen SVG Wars: May the morph be with you. (Craig Roblewsky) on CodePen<\/a>.<\/p>\n The demo above from Craig Roblewsky is a great example of the types of complex animations I want to help you build.<\/p>\n This article is intended for those who have a basic understanding of GSAP<\/a> and want to approach their code in a smarter, more efficient way. However, even if you haven’t used GSAP, or prefer another animation tool, I think you’ll be intrigued by these solutions to some of the common problems that all animators face. Sit back, watch and enjoy!<\/p>\n The video below will give you a quick behind-the-scenes look at how Craig structured his code in the SVG Wars animation and the many benefits of these workflow strategies.<\/p>\nVideo 1: Overview of the techniques<\/h3>\n