Physical interaction with mouse and elements

1

Goodmorning everyone,
I was wondering if it is possible to recreate in Hype this type of animation:
(cursor that moves elements that have their own physicality which return to their initial place)

https://10ideesrecuesenuxdesign.castoretpollux.com/en/

It's possible to do it and how?
I would love to share with you how to do this kind of things, maybe there are already some information in the forum that I didn't find.
Thank you all

2

Hype allows you to drag and enable physics. Only the “springs” are not directly supported in the GUI. But the underlying matter library (physics simulation) does. With a bit of code you can add the springs. You could run a script on scene load.

Documentation

3

Here is an example of adding springs using Matter JS based on a CSS class as selector.

Screenshot-20210105-180428
Screenshot-20210105-180428800×526 2.21 MB

SpringsByClass.hype.zip (29,2 KB)

2 Likes
4

Wow thanks a lot a really appreciate it!
You’ve been very kind and helpful, I will post the result on some experiments =)

2 Likes
5

Your welcome. For the animation effect on links (growing circle etc.) you could use a detection method based on matter

You could also use mouse over and out events but it most likely won’t work great on Mobile in that case.

6

Thank you Max for your help again. I was wondering how can I use the mouse cursor to interact with the elements exactly like dragging the blue circle in the example you sent me.
Of course it will work just on desktop, that fine for my project.

7

Basically you would:

  1. Add a Unique Element ID to the object (I made mine called interactiveBall)
  2. On Scene Load, add a function that listens to the onmousemove event and then changes the object position like so:
	var sceneElement = document.getElementById(hypeDocument.currentSceneId());
	sceneElement.onmousemove = function () { 
		var ballElement = hypeDocument.getElementById("interactiveBall");
		var width = hypeDocument.getElementProperty(ballElement, 'width');
		var height = hypeDocument.getElementProperty(ballElement, 'height');
		hypeDocument.setElementProperty(ballElement, 'left', window.event.layerX - (width / 2));
		hypeDocument.setElementProperty(ballElement, 'top', window.event.layerY - (height / 2));
	}

SpringsByClass-mouseover.hype.zip (29.5 KB)

8

Thank you very much for your precious help and your cooperation!
It was just what I needed, as soon as I put the site online I update you!

1 Like