Can someone give me advices to do an improvement on my actual animation


I begin with Hype and I want to improve the actual animation I’ve done but I don’t know how to do it. If possible, I would like to do it without JavaScript, but if it’s not possible, if someone can give me the code because I never coded in Javascript even if I understand the general structure of it.

For now, it’s an animated ad that viewer can interact with in the frame 2 by throwing the puck in one of the three goal’s areas. I’ve planed that when you’re over one of them it shows a different image.

What I would like to do is to create 3 pre-program paths that if the viewer want to go to the left area it starts a program path that goes left, get the puck smaller and that make it bounce at the end. I would do 2 different paths for the 2 other areas.

I’ve thought of making 3 different timelines that would be trigger depending on the location of the puck, but it’s about how to trigger a bezier path depending on the position of the moving element that I don’t know how to do it.

Here is he link to upload my animation :

Thanks in advance!!

One thing that may work for this is if you use a drag action, and control a timeline based on what direction you drag. That way, you can use motion paths that give the puck a more interesting movement. You could also use ‘Continue after drag’ so that the puck movement can be started with a drag, and it continues on its way after releasing.

1 Like