Need advice … animation (endless Piano keyboard)

Animation
1

I want to do a “motion endless ride over a piano keyboard” with a huge perspective (very big in the foreground and very small in the background). How can I do something like this in Hype?
I would be very grateful for some help :wink:

11663_Piano_1

2

This is probably not exactly what you want and more of a demo only. First up, Hype doesn’t support Z-Position. That can be faked through animation along X,Y and the grouping the Layer. Then use XYZ-Rotation to create the perspective …

Pseudo3d.hype.zip (50,8 KB)

3

To influence further perspective settings …

Perspective: https://www.w3schools.com/cssref/css3_pr_perspective.asp
Perspective-Origin: https://www.w3schools.com/cssref/css3_pr_perspective-origin.asp

…you can also use a class (assign it to a group container) and define some CSS in Head HTML:

.customOrigin .HYPE_element_container {
 	perspective-origin: 50% 60% !important;
 	perspective: 200 !important;
}

Example-File:
Pseudo3d-2.hype.zip (49,7 KB)

4 Likes
4

Added example

5

Nice..

6

Yeah! THX for your advice! Will try it – unfortunately I’m not very familiar with CSS settings.
I will see :-))