Adding Button to Timeline

Hi, I’m new here.

I wanted to ask, when you place a button on the scene, how do you make it appear at a specific point in the timeline rather than have it there all along and then become opaque at the right time?

How can you have the button appear at just the right time without it sitting there from before?

Thanks,

JH

Hi,

Have a look at the documentation on animation. This will explain how to move an element from one point to another.

Once you understand how to do that. Then you can use that to have a button off scene ( out of view ) and at a specific time in a timeline have it move to the new position.

To make sure it appears instantly I normally have the Easing set to instant and also keep the transition in a very very short time.

2 Likes

Create a new timeline for the button and set its first Keyframe's "Opacity" to Zero% at 00:00.00 -- go to 00:02.00 and set another Keyframe keeping the "Opacity" at Zero%. Then go to 00:02.05 and set another Keyframe's "Opacity" to 100%. In the "Scene Inspector" go to "On Scene Load" --> Start Timeline and select your new timeline.

Here's a demo...
button.hype.zip (9.7 KB)

Hey Greg. (@gasspence)

The only problem with that method is the button will still be clickable when opacity is 0

1 Like

If I use the different timeline option, why cant I just have it be there instantly at 0 seconds? Why do the opaque trick?

The moving trick also means that the button is on the scene (but outside it) from the beginning.

I want to know how it can appear at just the right time without being available from before.

Im not on my mac at the mo. But search the site or google for.

style.display = “none”

This is css. But used in JavaScript

Here,

This is using Javascript. The JS is run on scene load to initially hide the button. The show hide button will also run the same function.

I am using a Ternary Operator to toggle in the JS. Saves on code.

buttonShowHide.hype.zip (15.1 KB)

Was just wondering if there is an integral function in Hype where if you place a button in a scene, it doesnt exist all the way from the beginning of that scene. You may just need it right at the end.

No there is no built in option to dynamically add a element like this.

It can be done but again with JS.