Jump to content
Search Community

Transform translate and rotate on mouse hover

Elyssa test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi there, welcome to the GSAP forums!

 

As we state in the forum guidelines we don't have capacity to investigate, recreate or explain how to create custom effects found on other websites.

The code for the example you posted is actually linked to on the demo page anyway - so there's not much more we can add!

We are more than happy to answer GSAP-specific questions though. So if you give this effect a go yourself with GSAP and get stuck in the process, feel free to post a minimal demo here and we'll give you some advice on how to get closer to your goal.

Link to comment
Share on other sites

Hey Cassie,

 

Thanks, I've updated it with my codepen with quicksetter demo of the mouse follow. It is now rotating slightly however, I can't seem to make it work when I add a translateY. And also trying to add a random number to rotate.

Link to comment
Share on other sites

  • Solution

Not sure I understand what you mean by, 'add a random number to rotate'

But you're on the right track. I'm not really sure what effect you're after but it's all about getting values from the mouse and mapping them into a useable range.

 

See the Pen QWaRKmP?editors=0010 by GreenSock (@GreenSock) on CodePen



Maybe this blog post will help?

https://www.cassie.codes/posts/making-a-lil-me-part-1/

  • Like 3
Link to comment
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.
×
×
  • Create New...