I’m trying to create an effect of an endless stream of binary that is flowing into a database. I started with creating a symbol for a 1 and 0, added a fade in + movement + fadeout animation in each symbol timeline, and then I copied instances of the symbol. I offset the symbol actions on my timeline to get a sort of random feel to the flow of 1s and 0s as they flow by.
Note the following: I’m planning to export a GIF, so the repeat/looping effect is different than if I was setting it loop as an HTML 5 animation. While I’m interested in how to create the effect in HTML (I don’t like how it currently looks there, either, and I’m surprised at how different it appears compared to the GIF export), I’m primarily looking for a nice looping gif.
Here’s my problem - no matter how I arrange the timeline actions, I can’t seem to create a loop that feels endless. There’s always an obvious moment where you can see the sequence restarting. I could just copy/paste the timeline actions until the exported GIF is long enough, but aside from that not being very elegant it will result in a larger file size as I have more frames.
How would you approach this problem?
Too much data.hype.zip (24.7 KB)
Ultimately you need the end state of the animation to be identical to a start state. Here’s how I’d do it:
Setup some initial animations for a start. Then add copies of these animations all offset identically at end of the animation and leave a relatively big gap (sadly Hype probably won’t give you a nice paste with the right offsets from the playhead so you’ll need to arrange them…). Now what you’ll do is choose some time in the start group that’s about halfway done; and note the time from the first animation. Now go to the corresponding time in the second group (so this might be 0:00.15, choose a .15 offset in the back group). At this time add a Go To Time In Timeline to go to 0:00.15. Then fill in the middle with randomized animations, but make sure to not overlay any before the 0:00.15 time or have any that are running after the time of the timeline action. Finally add a timeline action at 0:00.00 that will go to the 0:00.15 time so it starts at the right spot.
When exporting an animated GIF, Hype cannot calculate the proper duration in this type of looping case. What you’ll want to do is use the time of the last timeline action and subtract the amount of frames that it goes to. (So if it were 0:04.25 and goes to 0:00.15, then choose a duration of 0:04.10).
One of the other tricks I found was to try not to have time periods where there are gaps, because that looks like a reset point.
Here’s the example I did to verify the steps:
falling.hype.zip (13.8 KB)