Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
f0rfun

What do you call such an animation/effect?

Recommended Posts

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!

Link to post
Share on other sites

 

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 zYBWzZK by akapowl (@akapowl) on CodePen

 

 

Hope this helps.

 

Cheers,

Paul

 

  • Like 4
Link to post
Share on other sites

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×