how can i make it responsive?

[Elia]

How can I make that in responsive mode the images are 9:16 and one at a time instead of stretched a lot and put together.

Ps: how do I add a feather to the edges of the images, as if they gradually disappear?

See the Pen dyQqrym by edalbe (@edalbe) on CodePen

[mvaneijgen]

Hi @Elia this can be done through CSS, I've given your images a fixed with (If the height is 500px a width 281px is around a 9:16 ratio) flexbox by default will try to fit all the elements in the container, but if you set flex-shrink: 0; it will not allow it to become smaller.

 

The feather edges I've done by adding an :after element to your image with a gradient in it that goes from white to transparent and back to white again. Manually writing out a gradient is a bit tedious in my opinion, so I've used this tool https://cssgradient.io

 

These are not really GSAP questions which this forum is focused on. Having a great understanding of CSS is really important when working with GSAP, so be sure to stock up on those skills. Hope it helps and happy tweening! 

 

See the Pen wvQEOXa?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[Elia]

@mvaneijgen Thanks a lot for the answer. I was able to give the nuance like this too, I meant the nuance only to the right and left side of the entire container (see attached file)

[mvaneijgen]

Then the same idea applies, but instead of putting the CSS logic on each images you put it on the whole container.