Animation or JS

Hello, is it possible to achieve this effect with a script?

Timadeo-mouseMouve.hype.zip (480,7 Ko)

Hello Christian,

sure, although you wouldn't get easing for free. As you already solved it with Timelines I am not sure why you would want to switch over to script?

regards

Hello Max,
yes, it is done with the timelines and it is relatively satisfactory. However, this solution requires that these timelines run in a loop and as soon as the scene is displayed, the image is in motion. Thus, the rectangles located in the corners do not always have the desired effect. For example, the top left rectangle should always scroll the image up and to the right. But depending on the position on the timeline, this rectangle can also read up and to the right, or down and to the right. It's not much but it disturbs me (hee hee!). And then, I'm curious to know how JS provides a more efficient solution.
Regards (translated with google)

I understand “curiosity” combined with a “nag” is a powerful motivation. Well, you could just create an relative timeline for every end position and have each trigger fire it’s own timeline instead of a combination of timelines.

With JavaScript you would need to do something similar. Define the end positions and then have an animation forward towards that position. The animation part (movement over time) could be done in several ways.

The most native one would be to use hypeDocument.setElementProperty

With one call on top and one on left

The duration could be either fixed (like always 1 second) or based on distance (some basic Pythagorean math).

Alternatives would be fully hand coded with an interval or animation frame or animated with CSS animation or an animation library.

1 Like

But yes of course ! 1 rectangle = 1 timeline. Why am I doing it complicated instead of just thinking. As for the JS, I will wait to know more about it before embarking on such an adventure.
Thanks Max

1 Like