Image Slider

[viksa]

Hello guys,

 

I am pretty new to GSAP, I started playing around with some simple animations and transitions. However, what I want to do know is a bit more complex, and I need your help with it!

 

What I want to do, is an image slider, like on the image below:

 

I want the cursor to be "next" if it is positioned in the right half of the screen, and "previous" if it is positioned in the left half of the screen.

 

How can I achieve this? Thank you for your help and support!

[GreenSock]

Welcome to the forums, @viksa. Unfortunately we don't have the resources to provide free general consulting - we really try to keep the questions focused on GSAP. What you're asking is definitely more of a logic issue. 

 

There are many ways to approach this. You could create an invisible element on each half of the screen, and just use a hover (or mouseenter) to trigger the change to your cursor/text. Or you could get more complex and use a mousemove/pointermove listener that runs logic to see if it's on the left or right half of the viewport, and respond accordingly. 

 

Good luck with the project. If you need GSAP-specific help, we're here anytime. 

[akapowl]

7 hours ago, GreenSock said:

You could create an invisible element on each half of the screen

 

Something like shown in this thread; instead of the animation of the arrow you'd just have to swap out the cursor you'd want to be shown. 

 

 

 

If you need a start on how to make something follow your mouse-cursor in the first place, this codepen demo could be a good start-point.

 

See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen

 

There should be lots of other threads that could be helpful for you, too, if you search for it.