Ex Adobe Edge Animate User looking at viability of Hype

[jonathan (Jonathan Deutsch)]

The text contents (InnerHTML) of elements is animatable, so you could make keyframes. I've seen others drive it with code, which might be easier if you're familiar with JavaScript.

Hype uses the HTML5 DOM, so a little bit of trickery is involved in making a a circular element like that. These threads have example documents making a circle loader with numbering:

Circle Downloader Animation Plus Counter

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. [image] Circle Animation.hype.zip (21.2 KB)

Create a circling animation

I am looking to achieve a similar animation to the gif below but with an oval, I’ve switched from Edge Animate and was able to do this by clipping half of the circle within a group, hiding the overflow then moving the clip to show the half circle. I then duplicated the group and did the same effect to the bottom half of the circle, so it looked like it was continuous loop. Any help would be greatly appreciated! [image]

Circular countdown

I like to make a circular countdown i.e. in a timeline the circular progress bar will become 0% to 100%. [image] is there any unique way?