Elia Posted July 25, 2023 Share Posted July 25, 2023 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted July 25, 2023 Share Posted July 25, 2023 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 1 Link to comment Share on other sites More sharing options...
Elia Posted July 25, 2023 Author Share Posted July 25, 2023 @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) Link to comment Share on other sites More sharing options...
mvaneijgen Posted July 25, 2023 Share Posted July 25, 2023 Then the same idea applies, but instead of putting the CSS logic on each images you put it on the whole container. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now