Custom Values (ways to get values you can manipulate in the GUI)

Hype still doesn’t offer custom values in the timeline. So if you need to put a handle onto a value that you can animate this thread is for you. Guest postings and ideas welcome!

My first approach is to have on stage value sliders that hide on publication but still can be “read” and the transferred to whatever destination (function, attribute, library etc.) you need.

On Stage Sliders

Download:
OnStageSliders.hype.zip

Preview (with visible slider, usually hidden in production):
OnStageSliders.html

On Stage Knob

Download:
OnStageKnob.hype.zip

Preview (with visible knob, usually hidden in production):
OnStageKnob.html

(Miss)using easing functions

Download Take 1 (using progress only, direct named attribution):
UsingCustomEasingTake1.hype.zip

Download Take 2 (using progress and start to inverse, function call allows easy editing):
UsingCustomEasingTake2.hype.zip

2 Likes

Cool stuff; some notes:

  • It took a bit to figure out what this was about because the data-knob-group is set to visibility: hidden
  • Can you use requestAnimationFrame instead of setInterval(..., 10)?
  • From a developer perspective, I was fully hoping folks would use the math equation timing functions in novel ways like this :slight_smile:.
2 Likes

RequestAnimationFrame is in the making. I had it but then wanted to create a wrapper to allow easy cleanup. Will let you know when done. More to come…

Yes, as it should only be used as a value generator in the GUI to rig up something. Would love custom timeline values that we can register on a project basis.

@jonathan Groundhog Day… I had that same idea in 2015 :crazy_face: see Animating custom CSS properties

1 Like

Your welcome! BTW when entering code maybe some of the keystrokes for the timeline in the background could be disabled. It is frustrating that the easing pop-out sometimes collapses when pressing the wrong key. Also the height of the code input is fixed. Through dragging it out the width can be influenced a bit but not the height.

1 Like

Thanks - filed that feedback!

1 Like

I updated the demo files to use Hype AnimationFrame instead of setInterval.

  • OnStageSlider
  • OnStageKnob
1 Like

Added another example in (miss)using the easing functions:

If this was the case I think better show the knob and slider so people understand the relation. I comment visibility out and added a preview. Obviously the sliders and knobs should be ultimately hidden (in production, previews etc.) as that’s the point. Offering rigging possibilities for values.

1 Like