Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ilike.idontlike

Cursor position & hover effect on direction

Recommended Posts

Hiya everyone. I am new here but really hoping someone can help me out as I would love to use this amazing library to achieve this cool effect just posted on codrops; (https://tympanus.net/codrops/2020/07/01/creating-a-menu-image-animation-on-hover/). 

 

You'll see in the article it explains that the effect works on the direction of your cursor - actually it has two effects, one for when the image is revealed/hidden and the other for moving the mouse over the nav title. 

 

I'm trying to adapt the direction based element of this effect into a Webflow project and I am struggling with this because the tutorial seems to go the long way round of achieving these effects (see the layout at the start of the tutorial) and also the fact that there are multiple JS files created. I am fairly new to js and also GSAP (love it though) so a lot of this is a bit overwhelming and also makes it very hard to achieve using Webflow but essentially I would like help with these two directional based effects on hover;

 

1) I just want to reveal and hide elements on hover with the direction dependent on the mouse direction

2) moving the mouse to the left rotate's the image to the left, and to the right it does the inverse.

 

If anyone is able to offer me help I would hugely appreciate it!

 

Thanks so much :)

Link to post
Share on other sites

Welcome to the forums, @ilike.idontlike

 

I'm not familiar with Webflow but did you have any GSAP-specific questions we can help you with? It looks like your link to a CodePen didn't work - can you repost? 

 

The more specific you can make your question and the more isolated your reduced test case, the more likely it is that you'll get a solid answer. As you probably know, GSAP can animate pretty much anything. Unfortunately, we don't have the resources to build entire effects out for people or do free custom consulting but we'd be glad to answer any GSAP-specific questions. 

  • Like 1
Link to post
Share on other sites

When I've seen people adding custom effects to Webflow they often combine the multiple JS files into one JS file. You can do that simply by copying the contents of one into the other in the order in which they should be ran.

Link to post
Share on other sites
8 hours ago, GreenSock said:

Welcome to the forums, @ilike.idontlike

 

I'm not familiar with Webflow but did you have any GSAP-specific questions we can help you with? It looks like your link to a CodePen didn't work - can you repost? 

 

The more specific you can make your question and the more isolated your reduced test case, the more likely it is that you'll get a solid answer. As you probably know, GSAP can animate pretty much anything. Unfortunately, we don't have the resources to build entire effects out for people or do free custom consulting but we'd be glad to answer any GSAP-specific questions. 

 

 

Hey Greenock! So I hope it doesn't come across like I'm asking anyone to specifically DO anything for me, just help point me in the right direction as to what this particular code is doing. In terms of working within web flow, its not hard to insert your own code by any means, it just can be sometimes a bit more limiting as your working within webflow's own CMS rather than your own <img> tags for example (if you were custom coding your own site from scratch). also to reference your own .js file is quite tricky so most (including me) tend to write in their own js on the page within a <script> tag. Also I haven't crated a codepen because I don't know how to with this code that's in the codrops tutorial (hence my post here I guess).  In this article they use a layout in the (multiple) js file(s) that I genuinely don't understand so it kind of obscures how I can read the code to understand the animation part of it (which I'm sure is actually not that tricky, because so far GSAP has made animations very very simple for me to execute (thank you GSAP!!)).

To re-iterate, I want to create a GSAP animation that alternates in direction depending on the movement of the cursor on a specific axis. In this article the cursor movement on the x-axis rotates the image (that is attached to the cursor) to either the left or right depending on if the mouse is moving left or right. I just want to replicate this part is all, but have no idea where to start in terms of making a tween that alternates direction in relation to the cursor movement. If you or anyone is able to point me in the right direction to learn this I would really appreciate it :)

 

Hope that makes sense and clears up my question, sorry about the post so far. 

Link to post
Share on other sites
27 minutes ago, ZachSaucier said:

When I've seen people adding custom effects to Webflow they often combine the multiple JS files into one JS file. You can do that simply by copying the contents of one into the other in the order in which they should be ran.

 

Hey ZachSaucier! Thanks man but tbh there are parts of this layout in the article I don't understand which has so far made combining these files kind of....well I'm struggling to say the least hahaha. I honestly just want to know how to replicate the animation part of it that uses GSAP to target any div I would like on the page. so far reading this code has made it very hard for me to actually find out how to do that. 

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.

×