Creative Jump Loader Animation With Ripple Effect
[Demo/Download] Creative Jump Loader Animation The Jump Loader effect relies on a very useful plugin, the DrawSVGPlugin, which is a premium plugin that will help you with many SVG animations and effects. You how we create a playful Jump Loader animation using SVG and GSAP. Note that the demo files will work locally on your machine but if you’d like to use one of the effects that requires the DrawSVGPlugin in production, you’ll need to have a GreenSock membership. In the following, I’m going to show you how to create the Jump Loader, in detail. For that, I’ll be making use of GSAP’s sequencing tool TimelineMax and the DrawSVGPlugin. The DrawSVGPlugin is used for progressively revealing (or hiding) the stroke of an SVG which comes in really handy for the loader effects. For some more background on GSAP and the other tools used I recommend the following resources:
Getting Started with GSAP (GreenSock Animation Platform)
TimelineMax
DrawSVGPlugin
Some of you might be familiar with these tools but for those of you who are not, GSAP is a set of JavaScript libraries that can animate almost any value. So to business – we’re going to walk through the creation of the Jump Loader – it’s a fun animation that looks like a line is jumping out of some liquid and diving back in again. Because, well, why not. Let’s start with breaking down the SVG inside the HTML: <div id="container"> <svg id="loader" width="200px" height="200px" viewBox="0 0 200 200"> <path id="jump" fill="none" stroke="#2d2d2d" stroke-width="10" stroke-linecap="round" strokelinejoin="round" stroke-miterlimit="10" d="M47.5,94.3c0-23.5,19.9-42.5,44.5-42.5s44.5,19,44.5,42.5" /> <g stroke="#2d2d2d" stroke-width="1"> <ellipse id="circleL" fill="none" stroke-miterlimit="10" cx="47.2" cy="95.6" rx="10.7" ry="2.7" /> <ellipse id="circleR" fill="none" stroke-miterlimit="10" cx="136.2" cy="95.6" rx="10.7" ry="2.7" /> </g> </svg> </div>
This SVG was created using Adobe Illustrator, although there are other tools out there like Sketch (Mac only) or Inkscape that can do the same. I drew the curved ‘jump’ line and the two ripple circles in Illustrator as shown below. You’ll notice there’s a big red box around the graphics and the reason is this: when you select and copy graphics from Illustrator into your HTML page, the viewBox dimensions for the SVG are taken from the entire bounding box of that selection. This means that if I was to just select the jump line and the circles, the SVG’s viewBox would only be the width and height of those selected graphics as a group, leaving no breathing space around the animation (don’t forget we’ll be animating the ripple circles outwards on the SVG canvas so we’ll need extra space for those to expand into).
To create the bigger SVG canvas (and to place the graphics in the center of the SVG) I copy a rectangle along with it – so if I want an SVG canvas of 200 x 150 (which this is) then I just make the rectangle 200 x 150, select all my graphics along with it (which together are smaller than 200 x 150) and copy them into the HTML. Then I simply delete the rectangle. It’s just a little trick I use to avoid animations or strokes cropping off the edge of the SVG canvas (or painstakingly having to adjust all the values of the SVG elements to move them inside the canvas). So the elements we have are the ‘jump’ line and the two ‘ripple’ circles. Notice the jump line and circles have an ID assigned to them – you can create these IDs in Illustrator by renaming the layer of that graphic although it often comes out with extra characters added to the end which is a little frustrating. Some of the attributes that Illustrator adds to the SVG element can be removed, leaving only the viewBox and the dimensions. So that’s the HTML with SVG.
[Demo/Download]