Erratic behavior with time lines

Hello,
It is been impossible to move my timeline when I want. In this example, I need to move it to fixed times and the behavior is weird.
NOTE:


I'm using extended function to move from T1 to T2, and to convert frames to seconds.
Can you help me please?
Thanks in advance!
diafragma.hype.zip (1.3 MB)

As always: without a hype-sample it'll be hard for someone to give support ...

Sorry, I forgot to attach !
diafragma.hype.zip (1.3 MB)

Hello, can anybody give me any idea about the code...Really I do not know how to proceed...Thanks!

machinery.hype.zip (1,3 MB)

not sure if this fits 100% your aim, but rewrote the the code ... felt it was overcomplicating things ...

5 Likes

Wooo!...I'm still thinking that the level of your support is really amazing!!!...Since many years using Hype I always have had your support, and with jobs like yours today I'm really convinced ... Thanks x 1000 !

1 Like

you're welcome :slight_smile:

This would be my approach. This version uses very little code and relies on the use of different timelines: The aperture runs in a relative timeline (per status), while the gears run separately depending on the direction they need to take (aperture opens, aperture closes). In this example, I have two timelines for the directions, each of which is started. I also tried a version where I only address one relative timeline for the gears and then let it run forward or backward as needed. Both versions have a problem when a directional instruction comes twice in a row, such as the path close-lessOpen-open. Or vice versa: open-halfOpen-closed. I haven't found a solution for that yet. Do you have any ideas, Hans?

diafragma_2.zip (1.3 MB)

2 Likes

Hello, the solution gave by Hans works amazing, so the challenge has been solved! Thanks to all of you again!

I know that. These are just some hype finger exercises... :grinning:

Some more finger exercises. :smile:

So you could set up your single timeline as in the original. But only as a guide to get the Rotate angles etc. Or to use in more direct controls later on...

But to get through the complexity of what's needed in the animation in regard to duration and position of elements for each stage. you can then just use the Timeline as a guide to the properties needed and set them using code.

The property values would be set on the Additional Attributes of the buttons.

When the button is clicked it runs the code and its Attributes are read and used.

open Button

Screenshot 2023-04-23 at 00.08.43

Half Open Button

Screenshot 2023-04-23 at 00.08.58

The code uses the setProperty API. where we can set the property and duration.

The setProperty API also uses relative property values similar to a relative time line.

We do not get extra behaviour if the same button is clicked twice because the properties are already set to the values.

Code :

	//== The Symbol
	var machine_ = hypeDocument.getSymbolInstanceById('machine')
	
	//== The Buttons
	var Engranaje_ = machine_.element().querySelector('#Engranaje')
	var Iris_ = machine_.element().querySelector('#Iris')
	var Apertura_ = machine_.element().querySelector('#Apertura')
	var Aspas_ = machine_.element().querySelector('#Aspas')
	var Lampara_ = machine_.element().querySelector('#Lampara')
	
	
	//== Action on for the Buttons Attributes
	hypeDocument.setElementProperty(Engranaje_, 'rotateZ', element.getAttribute('EngranajeZAngle'), 2.0, 'easeinout')
	
	hypeDocument.setElementProperty(Iris_, 'rotateZ', element.getAttribute('IrisZAngle'), 2.0, 'easeinout')
	
	
	hypeDocument.setElementProperty(Apertura_, 'width', element.getAttribute('AperturaWH'), 2.0, 'easeinout')
	hypeDocument.setElementProperty(Apertura_, 'height', element.getAttribute('AperturaWH'), 2.0, 'easeinout')
	
	hypeDocument.setElementProperty(Apertura_, 'top', element.getAttribute('AperturaTop'), 2.0, 'easeinout')
	hypeDocument.setElementProperty(Apertura_, 'left', element.getAttribute('AperturaLeft'), 2.0, 'easeinout')
 	
  	hypeDocument.setElementProperty(Aspas_, 'rotateZ', element.getAttribute('AspasZAngle'), 2.0, 'easeinout')
 	
 	//== Always set to 0 regardless
 	hypeDocument.setElementProperty(Lampara_, 'opacity', 0)
  	
  	
  	//== Action on for the Buttons Attributes // This will only really show the Lamp when needed.
 	setTimeout(() => {
 		hypeDocument.setElementProperty(Lampara_, 'opacity', element.getAttribute('Lampara'), 0.3, 'easeinout')
 
	}, 1800);

machinery_mhv1.hype.zip (1.3 MB)

2 Likes

Very nice Guys :smile: to mention: @MaxZieb once did this Project with chaptermarkers in a timeline. This would Cover such Projects as a General approach.

4 Likes

Who dares summon me on a Sunday? :tornado::japanese_ogre:
Ah, it's @h_classen... All good then! :smile:

You know, labels... that feature request's got more dust on it than an antique store during a sandstorm. Cough, cough :desert::dash:

I regenerated the html in that post so video should work again.

2 Likes

:innocent:

Please!!!

Simply clever... :+1: :grinning:

1 Like

¡Olá Amigos!

Attached is: Machinery 4.hype.zip (1.3 MB)

The “Machinery 4.hype” file uses only timelines (no coding, timeline actions, Additional HTML Attributes, etc.) to achieve the same look as those files~presentation in this thread; of course one can do a lot more with the code version if desired, but the effect as presented by the OP is the same.

I created this Hype project (based on the project in this thread) for a "Getting Started - Relative Timelines" topic - You can read the full post here.

2 Likes