Things always appear more exciting and impressive when they are moving and interactive. Just as pictures were turned into movies to increase their value and interest, web developers are now including more animations and interactive elements into websites to help draw users in. This may seem daunting as animations have so many moving parts and require a lot of backend work.
Luckily, there are people in the world creating javascript libraries to make things like browser animations much easier to understand and create. This is where GSAP and Scroll Magic come in. If you haven’t heard of these libraries before you have come to the right place. For a quick overview of these two libraries, you can jump to their respective websites www.greensock.com/gsap and www.scrollmagic.io/examples
Planning Out Your Animation
The first thing that I would suggest when starting to create one of these animations is to plan it out. That may go without saying but there are a few things that I feel are different in planning an animation than just saying “move that part here, and spin that thing”.
Scroll Magic takes advantage of jQuery to move specific elements. So if you are doing an animation with an SVG image, for example, you want to make sure that each element that is moving has a unique name and one that will clearly identify what it is. Whether you are drawing your initial image in Adobe Illustrator or Sketch make sure you are grouping and naming elements that you are wanting to move. It will save you a lot of time in the long run.
HINT: Even when you are doing much simpler animations, giving specific id’s to an element makes your javascript code much cleaner. Having clear names also makes it much easier to go back into your code and find a specific animation if you wish to change it or take it out.
Using Trigger Elements Effectively
The next big step in planning out your animation is identifying your “trigger elements”. In Scroll Magic these are the page elements that start the animation you have created once the user passes the trigger on the screen. These triggers are highly configurable so the planning isn’t usually that complicated. In most cases, the animated element can be its own trigger so that you ensure that the element can be seen by the user before the animation takes place.
There are a few more tips that I think will really help you make top notch animations. Check out my next blog to hear about the remaining tips: separating elements into unique divs and keeping animations subtle to make sure you don’t overwhelm your users.
