Jump to content
Search Community

Need help with GSAP slider

iotron test
Moderator Tag

Recommended Posts

Hi, I am trying to create a 3d slider using the gsap codepen example horizontalLoop function. But since the 3d slider is using the Draggable object directly. I am having difficulty setting the horizontalLoop function correctly. Can anybody kindly point out what I am doing wrong?

original 3d slider (doesn't snap to center)

See the Pen poKEgzZ by iotronlab (@iotronlab) on CodePen

See the Pen gOjZxYd by iotronlab (@iotronlab) on CodePen

Link to comment
Share on other sites

Hi,

 

Sorry for the delay.

 

As far as I can tell the endless horizontal loop helper function is not intended for this type of transform. Basically here you're dealing with angles and not translation, which is what the helper function is for.

 

Is worth noticing that, with this one, you have created three threads regarding the same subject (in fact the codepen URL is the same - not the endless loop implementation though). This is about the final angle of the elements container.

 

I'll try to take a look at it tomorrow and see if I can come up with something to help you get started on that particular path.

 

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

Hi @iotron. Thanks for being a Club GreenSock member!

 

Yeah, that's definitely beyond the scope of help we can typically provide in the forums here, but if you'd like to explore paid consulting options, feel free to contact us. Or you can post in the "Jobs & Freelance" forum. We want to make sure you get the help you need...there's just a limit to what can be provided for free in the forums, that's all. Anyone else is welcome to chime in with answers, of course. 

Link to comment
Share on other sites

As the example actually builds a circle which by its very nature is a loop and endless too, you should not need another loop helper. If you simply check on dragEnd if the rotation of the circle has to be corrected to the nearest snap rotation, and tween the rotation accordingly, that should do. As far as I understand your intentions.

If you have a much larger number of cards than can be sensibly fitted into a circle of that sort, you have to replace the one 'behind' you with each nth of the rotation.

  • Like 2
Link to comment
Share on other sites

On 2/4/2023 at 5:25 AM, Rodrigo said:

Hi,

 

Sorry for the delay.

 

As far as I can tell the endless horizontal loop helper function is not intended for this type of transform. Basically here you're dealing with angles and not translation, which is what the helper function is for.

 

Is worth noticing that, with this one, you have created three threads regarding the same subject (in fact the codepen URL is the same - not the endless loop implementation though). This is about the final angle of the elements container.

 

I'll try to take a look at it tomorrow and see if I can come up with something to help you get started on that particular path.

 

Happy Tweening!

Sorry for the spam. I have been trying to implement the snap to centre for the active element (final angle for the elements container) for a while now. Having failed at that, I tried to reverse engineer the horizontal loop which has the snap function for creating the 3d slider, which won't work on this type of transform as you pointed out. That's why I am in a fix now. I have implemented all the animations with gsap on the project and it makes little sense to add any other library just for the sliders. It would be very kind if you could help me implement the snap function in the 3d slider. Thank you.

Link to comment
Share on other sites

Hey @iotron,

 

I haven't had a chance to deep dive into what you're looking to do, but I created this 3d slider (vertical, and opposite radius location), but implements snapping. 


Here's my walk-through on how to build it:
https://frontend.horse/episode/behind-the-scenes-elegant-seagulls

 

CodePen:

See the Pen GRxNJGK by elegantseagulls (@elegantseagulls) on CodePen

  • Like 2
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...