Continuous Ball flow animation

Animation
1

is it possible to make a continuous and non-stop ball flow in this animation? without adding a new ball to the path?
test.zip (14.7 KB)

2

ballFlow.hype.zip (18,4 KB)
i'm sure there will be some more approaches ... :slight_smile:

3 Likes
3

Yes! :grinning:

test_2.zip (23.3 KB)

3 Likes
4

Thanks a lot for the answers both of you!! (h_classen and ktewes) you really saved me. I was scratching my head and couldn't find a solution. The first solution (h_classen) I managed and implemented, the second (ktewes) while I understood its logic I did not manage to implement it. I didn't understand the process with the symbols , first I make the vector symbols and then the movement? or?

2 Likes
5

Yep. You would draw a circle (or whatever…). Keep it selected and choose 'Symbol -> Make Symbol from Selection (or something like that, I'm on the phone…) Double click the Symbol - now you're inside the symbol and you can define the movement. Create a loop by placing a 'startTimeline' command at the end of the animation. Go back to the Main Timeline (outside the symbol) and make as many duplicate copies as you need. Now start these symbol instances at different times by shifting the symbols starting actions on the Main Timeline.

2 Likes
6

I also made the second solution, thank you very much! Ktewes Kalle!
but i am facing a problem, (i have more balls in the project) when i minimise for a while in the browser and then maximize, then the animation breaks and the balls get confused, is there any way to fix this, or there is something to refresh the animation to run from the beginning?

7

Ahhh, damn... runs into the sam issue... Yes, there is a solution for it: Synchronized animation after toggling between browser tabs or applications - #10 by MarkHunte

8

I did wonder about this when I saw this thread the other day and had a quick look, the adaption will need to take into account the multiple timelines all starting and stopping at different times.

9

does a simple reload of the scene be an option¿

	document.addEventListener("visibilitychange", function() {
 	 if (document.visibilityState === 'visible') {

hypeDocument.showSceneNamed(hypeDocument.currentSceneName(), hypeDocument.kSceneTransitionCrossfade, 1.1);
}
}
);
10

Hei Hans! No, doesn´t work for me... I modified Mark´s script, so that

  • Each of the ball symbols gets the class 'ball'
  • The init function starts on 'prepare for display'
  • That function adresses any of the ball symbols, pauses Main Timeline when hidden, continues Main Timeline when visible

Seems to work...

test_3.zip (21.7 KB)

1 Like
11

reloading a scene should always work ... or? except persistant symbols ... which would require reloading the document

Your solution is the best, but it seems elaborate as you'll need a custom setup for every Hypedocument

2 Likes
12

Yep, I see your point. But - this kind of animation has always almost the same structure. Once you know you can set up a template file. Applying that to a new project is a matter of less than a minute: Interaktive News-Grafiken (4th slide)

1 Like