Making Rectangle Flash -Easiest Way? (21.1 KB)

1 Like

Not sure I understand exactly, but I did the first three rectangles with a middle point (keyframe) in the blink timeline for each element to change the bg color then back to its original color, then go to the next rect and so on… (21.4 KB)


As Greg (@gasspence)

Says you need to explain a bit more…

But here is my take on what you want.

I used a random color generator function from

When the button is clicked it runs the code once and then a timeline which we use as the 5 second timer. ( Mor simpler than using a JS setInterval().

The Change colour function then runs every 5 seconds and randomly change all the colours. All the Rects have the same class name which is used in the function to id them. (21.2 KB)


Here is a second take on this.
A liitle more complex in JS, I will explain it when I get a min… (21.4 KB)

Timeline is set to 2 seconds not 5…


Thanks Mark! Yes, this is exactly what I need it to do!

I’m having trouble understanding how I might make the blink occur more frequently. For example every .5 seconds.

UPDATE!: I see that by changing the interval at which the ‘blink’ timeline repeats will do it!


Did it that way to make it easier to adjust.

Great! I’m just noticing a delay when the timeline repeats. Is there a way to have it restart seamlessly?

Thank you!

Probably :grinning:

Will look at it when back at Mac


The simplest way I think is to add a call to the Hype function to call itself.


hypeDocument.functions().changecolors(hypeDocument, element, event);

After the line

window.rectsIndex = 0;

1 Like

Thank you Mark! That did it.

I’m having trouble finding a way to make the blink last a fraction of a second longer.

How long exactly…

Maybe twice as long as it is flashing now?
It doesn’t need to be anything specific just so that it is a bit more apparent.

When you say flash, do you mean fade from one to other button?.

Can you give me a better idea…

Well, I anticipate having this function for different tempos on different scenes. Therefore the flashes do not need to fade from one to the next but instead be more like a metronome. Currently, the flash works great but it happens so quickly that it is a bit hard to see.

Does that help?

Sorry, not being into Music I am finding that a little hard to picture .

I am sure we can work something out…

In the project there are couple of things that happen.

A grey Rect colour changes to another colour.
When the the timeout kicks in its colour is changed back to grey.

The timer gets it’t time to kick in from the duration time of the time line.

Lets say 2s. This is done so the change of the colour back to grey coincides with the next rect changing colour.

Now if you want the change back to be longer or shorter you can put in the timeouts time argument a time in milliseconds.

I think having the timeouts in milliseconds would work well. How would I do that exactly?

Thank you!

I discovered a problem with the code when changing times, need to fix it. But in doing so I think I got the display you want…

Will be back…

1 Like

So via PM we worked out that the effect we wanted was

rect colour to change. - delay - rect colour revert - delay - next colour change

So changing

}, blink);


}, 200);

Seems to work.

Also from PM

This one uses the colour of the digit under the rect to determine the rect change colour.
The rects are in groups with their digits and we use classNames to find the elements in each group to get and set the correct properties. (24.4 KB)