Seeking Expert Guidance for GSAP Double Slider Implementation

[CreativeRobot]

Dear GSAP Community,

 

I hope this message finds you well. I am currently working on a project involving a GSAP double slider, and I find myself facing challenges in achieving the desired functionality and animation consistency. Despite my best efforts, I am struggling with overlapping issues when scaling down the browser window, and I'm encountering difficulties in ensuring the slider's timing, smooth animations, and effective control.

I am reaching out to this vibrant GSAP community to seek assistance and guidance from experienced members who can share their expertise. Specifically, I am looking for insights on optimizing the slider's performance, refining animation timing, and establishing a stable control mechanism.

As a novice in this area, I greatly appreciate any assistance, advice, or code snippets that could help me overcome these hurdles and enhance the overall effectiveness of my GSAP double slider.

 

Thank you in advance for your time and support. I have attached image to illustrate how I want it to look on all screen sizes.

 

Best regards,

René

See the Pen PoLKXBJ by ren-winther (@ren-winther) on CodePen

[GSAP Helper]

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Super generic questions like "how can I overcome hurdles and enhance the overall effectiveness..." probably won't get many answers either because it's far too broad. Just pick ONE thing you're struggling with and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I make it transition smoothly if I click multiple times quickly?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 🙂

 

Before you know it, things will fall into place one at a time.

 

Don't forget to explain exactly how to reproduce the problem, like "click the right arrow multiple times quickly and notice how it suddenly jerks on clicks" for example.

 

Good luck!

[Rodrigo]

Hi,

 

We have this simple demo of a double slider, maybe it doesn't has all the bells and whistles you need/want but hopefully it provides a good starting point:

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

 

Hopefully this helps.

Happy Tweening!

[CreativeRobot]

@Rodrigo Thanks 🤩 this was a great suggestion.

 

Kind Regards

René