What do you call such an animation/effect?

[f0rfun]

I came across this site and thought it was super cool. https://www.titansoft.com/en

 

When the mouse moves across vertically and horizontally, the foreground moves along with the cursor.

 

I'd like to try this effect on my own but am not sure the keyword I need to google on. Is there a name for this?

 

Most of the tutorials I've across will rotate the entire object (e.g. cube) which is a bit too much.

 

But when I launched the site on mobile, it loses this effect on touch. Is this a mobile constraint?

 

Thanks in advance, folks!

[akapowl]

 

Hey @f0rfun

 

The way this works, is by listening to the mouse position on the window and applying tweens to the elements according to that mouse position.

So it is not a mobile constraint, when this doesn't work on mobile, but more related to the fact, that on mobile, you don't have a mousecursor, that you can check positions on.

 

You can achieve something similar on mobile though, for example by checking on the device orientation, instead of the mousemovement, and adjust the tweens accordingly. So when you tilt your phone to one side, elements move, for example.

 

https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

 

 

 

Anyways, here is a basic codepen-demo, to show how you can get to achieving such an effect

 

See the Pen 25424af126477b014d6bff18ba34ffe5 by akapowl (@akapowl) on CodePen

 

 

Hope this helps.

 

Cheers,

Paul

 

[ZachSaucier]

Related threads:

 

[f0rfun]

Thanks Zach and akapowl. I can see it's a duplication. Please mark it as closed or dups then. Thanks.

[Mukhriddin]

On 10/30/2020 at 4:30 PM, akapowl said:

 

Hey @f0rfun

 

The way this works, is by listening to the mouse position on the window and applying tweens to the elements according to that mouse position.

So it is not a mobile constraint, when this doesn't work on mobile, but more related to the fact, that on mobile, you don't have a mousecursor, that you can check positions on.

 

You can achieve something similar on mobile though, for example by checking on the device orientation, instead of the mousemovement, and adjust the tweens accordingly. So when you tilt your phone to one side, elements move, for example.

 

https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

 

 

 

Anyways, here is a basic codepen-demo, to show how you can get to achieving such an effect

 

 

 

 

 

Hope this helps.

 

Cheers,

Paul

 

Hi, there. 

How can we set tilt effect for every item separately? In your example, hovering one causes tilt effect of another. 

 

Thanks, 

Mukhriddin

[GreenSock]

You'd just set up the event handlers for each element separately, and of course make the animation only apply to that one. I'd do a .forEach() loop for that. 

 

Sorta like this: 

See the Pen gOvvXyb?editors=1010 by GreenSock (@GreenSock) on CodePen