How to achieve this in Hype4? Hover Selection

I did this manually in HTML, but I want to see how can I do it on Hype4. Click here to see the sample.

You can achieve this by using two timelines. How to create and work with timelines can be found here: Hype Documentation - Timelines.

Once you have created the timelines ('pink' or 'blue'), you can create the effect in the respective timeline. The easiest way to do this is by using the Record button: Go to the 'blue' timeline, select the blue squares, press the Record button, then move the playhead to the right, go to the 'Metrics Inspector' - scale the squares by 10%, than got to the 'Element Inspector' and add a shadow — done for blue. You then do the same in the 'pink' timeline for the pink squares.

Next, create interactivity: By assigning actions to the text elements, you turn them into buttons. In Hype, you can turn any element into a button. How and where to assign actions can be found here: Hype Documentation - Actions.

The rest is straightforward:

  • MouseOver Button 'blue': continue Timeline 'blue' ('continue' works better here than 'start')
  • MouseOut Button 'blue': continue Timeline 'blue', but this time with the 'Play in reverse' option -> this allows the timeline and thus the effect to run backward and return to the original state.

You then do the same for 'pink' accordingly.

In my example file, I have placed the animation in a zoom container. This allows the content to adapt to the window size.

bluePink.zip (40.6 KB)

3 Likes