Today, we’re going to unwrap two sides of a circle from the center bottom position. It’ll open up like an egg from the Alien movies. Hopefully, a face-hugger won’t jump out and attack us. It’s a neat little technique that works well with circles and ellipses.
This is a three-post series involving tricks with helper lines. Be sure to check out Unrolling Circles and Unfolding Shapes too.
Behold the unwrapping circle
Before we get into the nuts and bolts to unwrap SVG circles, here’s a look at the result we’re trying to achieve.
See the Pen Unwrap It Single by Craig Roblewsky (@PointC) on CodePen.
Artwork prep
We’ve seen the circle pieces unwrap in the demo, but we need to properly prepare the artwork to make this work. You need two halves for your circle path. We can easily make this by creating a circle and using the scissors tool in Adobe Illustrator to cut the top and bottom center points. You will then end up with two perfect half pieces.
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="200" viewBox="0 0 500 200">
<path id="left" d="M250,175c-41.14,0-75-33.86-75-75s33.86-75,75-75" fill="none" stroke="#5cceee" stroke-miterlimit="10" stroke-width="5.41"/>
<path id="right" d="M250,175c41.14,0,75-33.86,75-75s-33.86-75-75-75" fill="none" stroke="#5cceee" stroke-miterlimit="10" stroke-width="5.41"/>
</svg>
The path direction
Each path start point must be at the center bottom. This is the 6:00 o’clock position from our whole circle. You can check this by adding a temporary arrowhead to the start (or end) of the path in Adobe Illustrator. More info can be found in my arrowhead trick post.
If the start points are correctly set, the right piece draws on counterclockwise and the left piece draws on clockwise. We’ll be erasing them from the end, but this is the direction they need to flow.
The variables
To start the JavaScript, I’m adding a few variables and master timeline. I’m also setting the stroke-width and stroke color with JavaScript. You are welcome to set them in the CSS or as presentation attributes, but I prefer doing it in the JavaScript.
const dur = 1.25;
const mainEase = "sine.inOut";
const master = gsap.timeline({ repeat: -1, yoyo: true, repeatDelay: 1 });
const svgns = "http://www.w3.org/2000/svg";
const demo = document.querySelector("svg");
const strokeWidth = 4;
const strokeColor = "#5cceee";
Our helper line
To make this work, we’ll be drawing a horizontal line from the path’s start point outward in each direction. You probably noticed the helper line is not in the HTML. We’re going to create that on the fly. If you’d like more info, I wrote a whole post about creating SVG elements with JavaScript.
Our unwrap() function takes two arguments. Those are the left and right paths we created earlier.
Line start and end points
We need to know where the helper line should start and end and how long it should be. For the first answer, I’m using the MotionPathPlugin from GreenSock (free to use BTW). We feed one of the target paths into the getRawPath() method and we get back arrays of points.
Both paths are circle halves and they have overlapping start points so it doesn’t matter which one we use. There may only be one array in there. It all depends on the complexity of your path. We need the first point in the first array. That will be where our helper line starts.
function unwrap(target1, target2) {
let start = MotionPathPlugin.getRawPath(target1)[0];
let xPos = start[0];
let yPos = start[1]
End point
Next, we need to know how long the path is so we can determine the end points of our helper line. I’ll use the getLength() method of GreenSock’s DrawSVG plugin for this info. You could use vanilla JavaScript, but I take advantage of GreenSock’s methods whenever possible.
Again, both halves are exactly the same so getting the length from either one is just fine. We then create the line and append it to the SVG. I’m using variables for the stroke color and width so the targets and helper line stay the same without too much effort. Feel free to use CSS, if you prefer.
let length = DrawSVGPlugin.getLength(target1);
let lineTarget = document.createElementNS(svgns, "line");
demo.appendChild(lineTarget);
gsap.set([lineTarget, target1, target2], {
stroke: strokeColor,
strokeWidth: strokeWidth
});
Position the helper line
Next, we need to position the line. We create a timeline for the two path targets and helper line and then, use the set() method to position the line. Remember, at this setup point the helper line has no length.
let tl = gsap.timeline({
defaults: { duration: dur, ease: mainEase }
});
tl.set(lineTarget, {
attr: { x1: xPos, x2: xPos, y1: yPos, y2: yPos }
});
The GSAP animation code
To make this work, we need three tweens. In the first two tweens, we erase the target circle halves by using the GreenSock’s DrawSVG plugin. The left half erases itself counterclockwise and the right half does so clockwise. (That’s why we set up the start points the way we did earlier.)
Each target also moves along the x axis. The left piece moves negative x and the right moves positive.
The third tween simply draws the helper line to the full length by animating its x1 and x2 attributes.
All tweens start at the same time via the position parameter of 0. The duration and ease are set as defaults so they will filter down to all tweens (if we need to make adjustments).
tl.to(target2, { drawSVG: 0, x: length }, 0);
tl.to(target1, { drawSVG: 0, x: -length }, 0);
tl.to(lineTarget, { attr: { x1: "-=" + length, x2: "+=" + length } }, 0);
return tl;
}
I’m also returning the timeline to a master for additional control.
See the Pen Unwrap It Single by Craig Roblewsky (@PointC) on CodePen.
Behind the scenes helpers
In this version, I’ve set the helper line stroke to yellow. See how the paths move and erase themselves while the yellow line draws?
See the Pen Unwrap It Single Show Line by Craig Roblewsky (@PointC) on CodePen.
The circle target path
Now I’ve turned off the paths erasing themselves. You can see how the circle halves actually move on the x axis as the helper line draws itself.
See the Pen Unwrap It Single Show Circle Move by Craig Roblewsky (@PointC) on CodePen.
Multiple targets
Here’s the final demo showing three targets. All are fed into the unwrap() function and nested on the master timeline. I added them manually, but you could use a loop (if you prefer).
See the Pen Unwrap It Tutorial Final by Craig Roblewsky (@PointC) on CodePen.
Final Thoughts
Artwork prep for the ellipses is exactly the same as the circle. Split it into halves and make sure the start points are at the center bottom.
I think we made it to the end without an Alien facehugger jumping out of our unwrapping circles and ellipses. Whew! I hope you found some of this information useful. Have fun unwrapping your circles. Until next time, keep your pixels movin’.
