Michelangelo, I took and look and the they look really nice, but isn't using a custom JS library like that a bit complicated for someone who is new to Hype? I much prefer simple techniques.
Laura, I took a look at your file, and first problem is that you have two things animating on the first group (bottom group in stacking order but containing the top oval line). You have both the Origin (Left) and the Width animating, but you only need the Width animating. That's what's causing the jumpiness there. Select the blue animation bar for that group, and then in the properties section in the lower part of the timeline, click and drag to select the Origin keyframes and delete those.
For the bottom part of the oval line, the issue there is that that it's a lot harder to have a group open from right to left than it is to have it open from left to right. This is kind of explained here
One technique to try is along the same concept as my example above, where you can have a mask essentially wipe off to reveal something. In this case, you could just start with a group with a white ellipse covering over that bottom green ellipse line, and then close to reveal it. So, it would close by animating the width of the group (with overflow hidden) from let's say 300 px wide to zero width.
I updated your project file, and have attached it here along with a gif. Let me know what you think.
oval-wipe_update.hype.zip (16.3 KB)