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.
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.
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.