0

I'm still a beginner in advanced CSS subjects. I need to create an effect between logos that I believe should be done with CSS Transition.

It is even difficult to explain with words, below is a .gif that shows what I need to do.

enter image description here

As you can see, the logos unmont and mount again. I have no idea how to create this effect, can you tell me how to do it? Whether it is just with CSS or a library is needed. Every help is welcome.

I created a project that contains some images in .svg format, but I don't know how to create this effect. I put into codesandbox

enter image description here

    import Agtech from "./assets/images/agtech.svg";
    import Embarcaai from "./assets/images/embarcaai.svg";
    import Geoapis from "./assets/images/geoapis.svg";
    import Kpmg from "./assets/images/kpmg.svg";
    import Nuvemshop from "./assets/images/nuvemshop.svg";
    import Paypal from "./assets/images/paypal.svg";

    export const images = [
      {
        id: 1,
        url: Paypal
      },
      {
        id: 2,
        url: Kpmg
      },
      {
        id: 3,
        url: Agtech
      },
      {
        id: 4,
        url: Embarcaai
      },
      {
        id: 5,
        url: Nuvemshop
      },
      {
        id: 6,
        url: Geoapis
      }
    ];

    import "./styles.css";
    import { images } from "./App.utils";

    export default function App() {
      return (
        <div className="App">
          <div className="content">
            {images.map((image, i) => (
              <div key={`image_${i}`} className="image">
                <img src={image.url} alt="" />
              </div>
            ))}
          </div>
        </div>
      );
    }
naveen
  • 53,448
  • 46
  • 161
  • 251
vbernal
  • 673
  • 8
  • 21
  • 1
    The animations in the logos you've presented are complicated in that they animate the logo piece by piece. Since every logo is a bit different, it would be nearly impossible to create that kind of animation with css only. You could animate the SVGs using a tool like Lottie https://airbnb.design/lottie/ - also, downvoting this questions because while it shows a simple html/css grid of images, it doesn't provide any attempt on your part to animate the images in the grid. It's kind of a "code it for me please" question. – admcfajn Feb 27 '21 at 18:40
  • If you don't need to animate the vectors piece by piece, you could use absolute positioning to position them one on top of the other within a position:relative continer and just use a transition on their opacity attribute. – admcfajn Feb 27 '21 at 18:45
  • you are looking to "*cross-fade*" between images. http://css3.bradshawenterprises.com/cfimg/ – naveen Feb 27 '21 at 18:49
  • I think this could largely be achieved by a mosaic effect. You'd load divs over the logos and perform a pseudo-random decrease in opacity for each tile loaded ontop, eventually with all being hidden and the background showing through. This could be done with a pure CSS implementation known as cross-fade (multiple cross-fades in your case). – Edward Savage Feb 27 '21 at 18:53

0 Answers0