Slider where the active slide is wider

[Adrian Stein]

Hi I found a pen and modified it to try and get it to do what I want but am having issues as im only new to gasp.

 

Basically I want the active slide to be wider than the rest and they have the same space between the slides ( like 40px). The issue is the example uses scaleX which skews the image. I want to reveal the image as the slide gets wider and the none slides to be closer together.

 

I know I need to animate the width and also change the x as the active gets bigger but im just not sure how.

 

Any help would be great

 

Cheers,

Adrian

See the Pen VwEZQmQ by adrian-stein (@adrian-stein) on CodePen

[Rodrigo]

Hi @Adrian Stein and welcome to the GreenSock forums!

 

Maybe this example is closer to what you're looking for:

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

 

The one you forked is build with scaling in mind. As you can see the approaches are a bit different.

 

Hopefully this is enough to get you started. Let us know if you have more questions.

Happy Tweening!

[Adrian Stein]

Hi Rodrigo,

 

That was the original example I used to modify to get to where I cam now.

[Rodrigo]

Hi,

 

I'm a bit confused to be honest. You mention that you already know that example, that you know you have to animate the width property of each image, then: Why are you using scale in your original example? The second example does exactly what you're after, right? If it doesn't then it would be very helpful to know exactly what you're trying to achieve.

 

One way to avoid the images to skew is to animate their scale in the opposite direction as their parent element. So if the parent element scale is down to 0.2 the scale of the image should be 1/0.2, which is 5.

 

If you can clarify this points it'd be very helpful.

 

Happy Tweening!

[Adrian Stein]

Hey,

 

That example uses scale, I used scaleX as I only want the width to change, but yes they do have the same spacing. If you change it to scale X then it looks like mine where there is a massive gap between slides, which I dont want. If you change it to X it also breaks as X is already used to calculate the position in the slider and its placement on the screen. I left my initial example using scale because if you change it to width the slides start overlapping and does not work. The x position of each slide would need to change as it does in the example as the a slide becomes active but then also take into account that a slide is shrinking and another is getting wider when determining the X position. If that makes sense?

 

See the image as to what I want to achieve hopefully it makes more sense?

[Rodrigo]

Hi,

 

Indeed this makes more sense and clarifies what you're trying to achieve. Thanks!

 

The problem is that this is not the simplest thing to do though and I can't recall an example of this characteristics to be honest. Unfortunately we don't have the time resources to provide custom complex solutions for our users in these free forums. You can contact us for paid consulting or post in the Jobs & Freelance forum as well.

 

What I'd do in your place is to create a timeline that does exactly what you want without any plugin, just an endless loop that you can switch directions. Then start adding Draggable and other tools into the mix, in order to achieve the effect you're after.

 

Sorry I can't be of more assistance.

Happy Tweening!