@The_Beaticus
This is one approach which is timeline based - as per your example. It does not address the “depending on what data I receive” part of your post as I have no idea how accessing that data will be manifested in your project.
The goal here is to decouple the timelines so the beer “bubbles” while the volume decreases in discrete units (in this case seconds on the timeline). The route I have taken is to create a Symbol within a Symbol. Just as Scenes have their own timelines so do Symbols. So the beer video runs on a continuous loop, while the volume of the glass is controlled by another timeline. In this example it only goes down - it could go up as well.
Project example here: Beer_Example_JHS-v1a.hype.zip (982.6 KB). Demo here.
The timeline for the glass on the right runs (volume goes down) for 5 secs & then pauses. Clicking the glass will run it for another 5 seconds, etc.
I also edited your video for purposes of this demo. I shrunk it from 1920px x 1080px to the needed size of 220px x 280px. Additionally I trimmed the run time to six seconds from 55 seconds. So now instead of a file 38 megabytes in size it is now 578 kilobytes. The video is looped in Hype. Six seconds is enough time to give the rising bubbles enough variety (at least in this demo).
====================
I think there is a better way to achieve this effect - especially if your data has a lot of variability in it - but for now I am out of time. The way I would go about this would be to use JavaScript to set the volume (“Top” property of the “Beer Vid” symbol) of the beer glass. This way you can use your data in a more flexible manner to animate the beer level up, down by what ever amount You wish (and as fast~slow as you like, not dependent on the timeline running at its fixed rate). Perhaps You do not need this kind of control. I could write a demo but it will be a day or so until I can get to it… or others may step in before that.
EDIT: Additional Demo - see the paragraph just above, ignore the part about not getting to it for awhile ;->
Below follows an example of using JavaScript without a timeline on the left glass (right glass works as before with the timeline ~ clicking on the glass to continue it playing after each pause).
Project File: Beer_Example_JHS-v2.hype.zip (987.9 KB)
Demo here.
Interface: Clicking on a button above the left glass adjusts the level of the glass to that corresponding percentage. Your actual data set will of course obviate the need for these buttons - which are used here for simplicity only.
The code also includes one line of jQuery for the animating (loaded in the “Head HTML” of the Hype document - see Hype’s “Inspector” panel - “Edit Head HTML…”). Note: jQuery is not required, but is so easy to animate elements with it.
The function below is triggered by clicking on one of the buttons above the left beer glass. Each button has an ID (“element.id” in the code below) which is used to calculate the percentage height the glass level should be. “BeerLeftHeight” refers to (surprise!) the left beer glass. We get the full height of the “glass” in line 3 (.getElementProperty(beerHeight, ‘height’); then multiply that number times the percentage supplied by the ID of the button that was clicked on, and animate the resulting number using jQuery. The “2000” in the jQuery animation line refers to 2000 milliseconds, the length of the animation time. “1500” would be 1.5 seconds, etc.
function setBeerHeight(hypeDocument, element, event) {
var beerHeightPercentage = (1-(element.id)/100);
var beerHeight = hypeDocument.getElementById('BeerLeftHeight');
var beerHeight = hypeDocument.getElementProperty(beerHeight, 'height');
var nuBeerHeight = beerHeight;
beerHeightChange = nuBeerHeight * beerHeightPercentage;
$('#BeerLeftHeight').animate({top: beerHeightChange}, 2000); //jQuery animation
}