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