Circle Downloader Animation Plus Counter

Animation
1

I just made this for fun, to see if I could combine a circle/rotation wipe animation with a percentage counter. With special thanks to @MarkHunte whose counter javascript I adapted to make this counter. Let me know what you think. If anyone wants to play around with it, make an update to it, I’d love to see it. Please post it here.

Circle Animation.hype.zip (21.2 KB)

2 Likes
2

I’m getting this message when trying to open the file:

Hype claims its at the newest available version though:

3

Gerfried, that’s my fault. It was made with a different version. I couldn’t copy and paste it, so I made a new document that will work for you, almost identical to the previous one except for the sizes. I made some slight improvements as well.

As far as making the counter, if you want to go from one to one hundred, just copy and paste the head html code, and the javascript code from my Hype document, as well as the timeline action keyframes and the Timer text, making sure the text has the Unique Element ID of Timer1. I made the length of the counter, triggered by timeline actions, pretty much the same length as the animations of the circle in two parts, right side and left side), which is exactly 100 frames long. Make the document, On Scene Load, Run Javascript, and select PercentProgress.

Here are the steps to make the circle animation, which should take just a few minutes to do.

  1. Make a circle, center it. I like the the border circle with fill of none.
  2. Group the circle.
  3. Group the group.
  4. Click the top group’s arrow and go to the group inside, the middle group.
    Make the middle group’s width half of what the group/circle width is. In this case that’s
    65 px. Type that same number into the left position, and type a minus in front of it.
  5. Make the Transform Origin in the Metrics Inspector for the middle group X offset 100%.
  6. Make the top group’s left position that same positive number, (65 px) and the width
    that same positive number.
  7. Make both groups have Content Overflow hidden. Name the top group “Right.”
  8. On the middle group, keyframe Z rotation from 0 to 180 across fifty frames. Select the blue bar and make the animation timing linear.
  9. Duplicate the top group. Change the duplicate top group name to “Left.” Change the top group Rotation angle of Y to 180. Change the Left position to 0 px.
  10. On the middle group, turn on the record button and change the keyframe Z rotation to start at 360 and go to 180 across fifty frames. Drag the blue animation bar to start at frame number 50 (00:01.20).
  11. Select the “Right” group and the “Left” group, and group them. Name that group “Circle.”

That’s it. Let me know what you think.

(CircleAnimationAlt.hype.zip (22.6 KB)

2 Likes
4

Cool technique, I learned something, thanks.

5

How do you make this go to say, 97% instead of to 100%. Also, I attempted to paste the animation, including the resource code, to another project and its not working. Thank you for your help in advance!

6

I made the adjustments to make the counter go to 97% instead of 100. If you look in the javascript code for percentprogress you can see what I did, just deleted the last 3 numbers in percentTogo. Then, deleted the last 3 timeline action keyframes, and shortened the duration of the left side rotating group to end when the timeline keyframes end. So, this closes the circle at 97%, but if you want the circle to not close and go to 97% complete rotation, then 360 degrees divided by 100 equals 3.6 degrees per each percent of the counter. 100 minus 97 equals 3. Then, 3 multiplied by 3.6 equals 10.8 degrees. So, the left side of the circle rotates from 360 down to 180 degrees. It should be less than the full 180 degree rotation by 10.8 degrees, so the end rotation should be 190.8 degrees rather than the current 180 degrees. (Let me know if my math is wrong).

As far as how to paste the animation into another project, I’m a little rusty but I think you can turn the whole thing into a symbol and import that symbol into the other project, but ask @jonathan about this topic specifically.CircleAnimationAlt.hype.zip (23.7 KB)

7

Lol, I wa just about to post the how two..

The only thing I will say then is once you remove the last three timeline actions select Left->group so you see it's keyframes.

Now place the play head inline with the last timeline action. If you then look at the z- angle for the group you will see it is at 197%.

Drag the end keyframe for the group back so it is inline with the last timeline action. Then set the angle to 197%

This is a good option.

There are a couple of things though. First the JS functions may not always carry across if the are not called within the Symbol.

In this case they are being called by the main scene.
The JS in the Head file will also not carry across.

First to make the Symbol, Select all the elements and then use the Symbol menu to Make Symbols from Selection.

Now the will get around the first problem of the JS function not caring across.

Select all the Timeline actions on the Scene's Main Timeline. Copy them ( cmd + c )
Open up the Symbol and place the play head at the 0 frame mark.
Paste the actions into it.
Close out of the symbol.

Back in the Scene's Main Timeline, delete all the timeline actions.

Now we get around the Head file JS not caring across.

Open up the JS Function.

Write this in as the first line of the code.

if ( !window.thisPecent ){window.thisPecent = 0;}

Now the Symbol is ready to export.

8

Thank you both!
I was able to create two symbols (97% and 87%) however when I import both into one project, they’re not coming out right. What should I do? Here’s what I’ve been able to do: (I managed to get it to work except that it shows “undefined” and the “%” on the right chart shows during the left circle animation.)
info-set-01.hype.zip (46.0 KB)

9

You missed this out in the 87 JS function.
I think you have more issues there but not had a chance to track them down..

10

Thank you Mark, I put it in there yet the "undefined" still shows on the right chart very briefly before the animation starts.

Also, I'd like the animation to begin play when the user scrolls to that location on the page. "on page scrolling". When I set an Action: On Enter Viewport > Start Timeline > Main Timeline, both the charts show "undefined" during test. Thoughts?

11

Also, as I create a new layout (for iPad Portrait View) the numbers of the % are not working. Thank you again for your help. File attached.info-set-01b.hype.zip (58.4 KB)

12

Thank you so much for the animation.

13

This is very handy!

I am trying to figure out how to make this countdown timer take longer, that is, go from 1 to 100 over 60 minutes?

Is there a simple way to change the duration without “Selecting All” and moving the timeframes 99 times or similar laborious techniques to stretch out the timeframes…?

14

If you were to just select all the timeline actions, you would not be able to “stretch” their duration as you can with a regular animation bar. However, if you select an animation bar AND the timeline actions, then Hype will scale everything proportionately. So you could just add a dummy animation on an element and then multi-select them all to stretch.

But that said, the timeline actions must always fall on a 1/30 of a second interval, so depending on how long you stretch it out for, you might wind up with not as even spacing as you’d like. It may just be better to setup a javascript timer and have that call the percentProgress() function.

1 Like
15

Just learned something new - Thanks!

3 Likes
16

Me too :+1::blush:

1 Like
17

Der Tipp “War Teil des Einsteiger-Kurses” :wink:

1 Like
18

:grinning::wink: