Hey, could anyone recommend a general approach to this use case?
I have a class photo, and I want to setup a face learning app for myself. I’ll use once scene with the class photo which consists of about 30 people. On key press I want to zoom into a random person, on second key press I want to reveal their name, and on the next key press I want to zoom to another random person.
The random order isn’t a must have, but I’d like to know if/how it can be done in Hype.
Any pointers for getting started or structuring this animation are appreciated.
I’ve got the basics like setting multiple keyframes for position for each of the faces I want to zoom in on, and then I’ll have a text object with each name, and each text object will have key frames setting the visibility.
I’m pretty sure I could easily do a linear run through each set of key frames which would repeat in the same sequence each time - that all uses features in Hype I’m familiar with. But randomizing the order complicates it. Other than using relative timelines, I don’t really know where to start.
Give each Small image the same class name personSmall
Give each Small image the same data attribute name data-person and and each value the persons name.
Give each large image the same class name personLarge l
Give each large image the same data attribute name data-person and and each value the persons name.
Group all the Large images and give the group the id of personLargeGroup
We can then run a function that counts in this case button clicks and runs different functions depending on the click number.
In the function that randomises the images. We gather the list of small and large elements in array lists.
And use a randomiser to try and always pick a different one.
The code then hides and shows the elements as needs.
The other two functions will show the name a and reset.
All of this example is really a mute point as you will have your own setup of how the images are displayed.
The main thing here is how to associate the images and text with each other simply by using the data attribute.
And some randomiser code that randomly picks an element from a generated list.
//-- init image lists and the current random image this section will only run once
if(typeof hypeDocument.customData.rand_ == "undefined") {hypeDocument.customData.rand_ = "" } //-
if(typeof hypeDocument.customData.imageList_small == "undefined") {
//-- image lists
hypeDocument.customData.imageList_small = document.querySelectorAll('.personSmall')
hypeDocument.customData.imageList_large = document.querySelectorAll('.personLarge')
//-- random image element
hypeDocument.customData.imageIndex = hypeDocument.customData.imageList_small[Math.floor(Math.random()*hypeDocument.customData.imageList_small.length)];
}
//--- This section will always run
//-- get large image group
var personLargeGroup_ = hypeDocument.getElementById('personLargeGroup')
//-- compare last image with this random image and keep doing so until they do not match
while ( hypeDocument.customData.imageIndex === hypeDocument.customData.rand_){
hypeDocument.customData.imageIndex = hypeDocument.customData.imageList_small[Math.floor(Math.random()*hypeDocument.customData.imageList_small.length)];
}
hypeDocument.customData.rand_ = hypeDocument.customData.imageIndex
var thisLarge =hypeDocument.customData.rand_.dataset.person
var largeImage = personLargeGroup_.querySelectorAll("[data-person='" + thisLarge + "']")[0]
.....
Thanks!
The relative timelines make sense to me.
Just to confirm - the only way to bring in a trigger than performs a random action with with a script?
The association of images and text is really helpful - thank you.
As long as you have user input, you can always create a “random” number with a continues invisible click handler (animating the display property, opacity won’t do).
No it’s either one or the other… the CSS example can be replicated with a timeline animation. But it was just an example to show that sort of randomness can be done without script. Doing it all in code is the easiest in maintaining once you wrap your head around it. Doing it with only timeline is doable but with 30 relative timelines a lot of work to stay focused… @MarkHunte has put in the work for a good template, so I’d suggest you give it a try or at least take some hints from it.
