Slider mouse cursor changes to left and right arrow

[Poojith]

Hello everyone,

 

Could someone help me, I am new to gsap. I want to make the home page slider mouse effect same like in this below example.
Please see the mouse cursor round changes to left and right arrow when user move the mouse to left and right directions on the screen. Can someone please add the scripts in a codepen editor and share with me.

https://shapestudio.co.uk/

 

Thank you in advance

See the Pen qBOYLKo by Poojithraj (@Poojithraj) on CodePen

[ZachSaucier]

Hey Poojith and welcome to the GreenSock forums!

 

Good start, though the GSAP version that pen is using is really old. We highly recommend upgrading to GSAP 3. I think it'd also be really helpful for you to go through our Getting Started article and my article on animating efficiently.

 

In addition to what you already have, you'll need to also add the following:

• Detection of whether or not the mouse position is inside of the right or left edges of the screen. It should be pretty straightforward to do in the mousemove callback using innerWidth. You could even use .mapRange() if you wanted to.
• I'd probably use SVG for the circle and arrow lines. That way it scales to all sizes that you need to easily and that way you can use DrawSVG on the lines to make them look like they're being drawn. 
• If the mouse is in the left or right side, scale down the circle and draw the paths for the arrow. If it goes back to the center, do the reverse or a different animation to back to the "normal" state.

If you have specific questions let us know and we're happy to help