Buttons playing timeline animations


(Tamara Cutler) #1

I’ve attached a graphic I am working on. Wondering if anyone can help.
My intent is to have the letters on the tire be buttons and play simple corresponding symbol animations. I have something sort of working here.
I used custom behaviors on each symbol (tirewidth and tiretype) to play the symbol. I also put a custom behavior on them to make other playing animations go back to frame 0.
So far I have only created the first two digits ie. the P and the 2.
I will eventually do all of them. However when someone is clicking too fast on the buttons it somehow activates both symbols and they play at the same time.
Is there a better way to do this so that one cleanly plays and makes any others disappear once you click on them? I am not able to code as of yet. Though it might be possible to follow simple coding instructions if they aren’t too complicated. tiressizes.hype.zip (569.7 KB)


(Hans-Gerd Claßen) #2

If you’ve got only a animated ‘Main Timeline’ within your symbols, this script will reset them.
i added one exception: if a symbol-element has got the class ‘noReset’ it will not be reseted.

you may run the script on the beginning of an action … so try and play around …

var activeScene =  document.querySelector('#'+ hypeDocument.documentId()+' > .HYPE_scene[style*="block"]');

var divsOfScene = activeScene.querySelectorAll('div');

for(var i = 0; i < divsOfScene.length; i++){
var currentDivId = divsOfScene[i].id;
var currSymbol = hypeDocument.getSymbolInstanceById(currentDivId);

if(currSymbol && !currSymbol.element().classList.contains("noReset")){
currSymbol.goToTimeInTimelineNamed(0, 'Main Timeline')
}
	
}

(Tamara Cutler) #3

Thanks for responding and I appreciate it but it’s likely a bit beyond my skill level at this time. Not sure where this goes? On the symbol or the button?


(Hans-Gerd Claßen) #4

tiressizes_vers001.hype.zip (571.3 KB)

how it works:

  1. add an id to each button that corresponds with the name of the symbol it shall play
  2. run two behaviours on each button: first resetSymbols, second playSymbolTimeline

thats it, no further custom behaviours.
requires that symbols only run a ‘Main Timeline’

a symbol that shall NOT be reseted: add a class ‘noReset’ to it

note: make sure buttons are big enough (for mobile >= 50px) and do not overlap


Help with "relative" menu where icons relatively resize and then downsize when others are selected
(Tamara Cutler) #5

Thanks Hans! I will try this!


#6

Great Information with your info graphics - will You consider posting the finished version?


(Tamara Cutler) #7

I’ll think about it, thanks!! It’s for a client so I will have to check into a few things first.


(Tamara Cutler) #8

In my haste I didn’t realize you had attached an adjusted version Hans. You are awesome! Thank you so so much and after opening I see how this all works now. I am learning! Albeit it slowly but surely. Best regards.


(Tamara Cutler) #9

I just wanted to thank you again for all your help with this. This is really the basis of almost every piece I want to create! I have figured out your instructions on to recreate this effect and incorporate all of your javascript. You have been so helpful Hans!


(Hans-Gerd Claßen) #10

great! thx for your response :slight_smile: