Centering a div within a slider - Draggable

[MaxiBartolozzi]

Hi guys,

This is my first time working with gsap and I'm running into an issue with my slider.

I've created this slider, now it's starting on <div class="first"> on the left. What I'd like to do is to center the slider on <div class="third"> on render.

I'd appreciate your help

 

See the Pen yLNGRzP by mxbarto (@mxbarto) on CodePen

[ZachSaucier]

Hey Maxi and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. 

 

There's a couple aspects of your approach that don't make much sense to me:

• Your container element is scrollable. That completely ignores the draggable's effect, they don't play nicely with each other by default. I recommend preventing scrolling on your container.
• You have an element called draggable but you apply the actual Draggable to the container... I'd apply the Draggable to the element called draggable.
• You set the bounds to an element within the Draggable. The bounding element is presumed to be an element outside of the Draggable.

To set the default position of the draggle element, just set the x of it. Here's how I'd set it up. I included two different potential start positions because you weren't clear on the exact effect that you want.

See the Pen poJqqKy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

For an even better effect, add in GSAP's IntertiaPlugin!

See the Pen OJVrrEY?editors=0010 by GreenSock (@GreenSock) on CodePen

[MaxiBartolozzi]

Hi Zach,

Seems like I have to get deeper into the gsap documentation before trying making this 😑.  The second one is the one that I was looking for.

Thanks very much for your help! I really appreciate it.