CODEWITHSUNDEEP
javascripthtmlcssreactjs
Joji
Joji

Reputation: 5613

How can I achieve this sequential fade-in effect?

I came across this page https://pepecph.com/ and thought the fade in effect of the pictures were really cool.

I tried to imitate that effect with styled-component to pass each picture's index as a way to separate them when they are all fading in.

-webkit-animation: ${props =>
    `fadein ${props.index}s`}; /* Safari, Chrome and Opera > 12.1 */

  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

Here is the demo: https://codesandbox.io/s/focused-clarke-eduf1

However it is not quite doing what that page seems to be doing, no matter how I adjust the time of fade-in. On the original page(https://pepecph.com/), every picture is showing up fast and delayed differently for some time. And I inspect the image element of the original page, it has this line of css 

transition: top 70ms cubic-bezier(0.25,0.46,0.45,0.94),left 70ms cubic-bezier(0.25,0.46,0.45,0.94),transform 70ms cubic-bezier(0.25,0.46,0.45,0.94),height 150ms cubic-bezier(0.25,0.46,0.45,0.94) 70ms,-webkit-transform 70ms cubic-bezier(0.25,0.46,0.45,0.94)

I am not good at css so I don't know if this has something to do with that visual effect.

Upvotes: 0

Views: 471

Answers (2)

Himali Patel
Himali Patel

Reputation: 118

Here's an example. The HTML requires a div to be wrapped around the whole of the body content if you want it to fade in all at once. Look for this:

<div class="wrapper fade-in">

There's a lot of stuff you can do with CSS, I've been using it for years and I still learn something new every once in a while.

All the animation commands will appear in your CSS like so:

@keyframes fadeIn
  to { 
     opacity: 1; }

Then your divs are going to have a class that calls the animation (@keyframes):

.fade-in {
  animation: fadeIn 1.0s ease forwards;
  [other div properties can be included here]
}

The HTML will look like this:

<div class="fade-in">
[content]
</div>

Finally, you'll need to make sure you include the vendor codes to make it compatible with all browsers [which adds a fair amount of code, which is why jQuery can be a better option for this stuff]:

@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

The vendor codes will have to be duplicated again in your div class in the CSS:

.fade-in {
  animation: fadeIn ease 5s;
  -webkit-animation: fadeIn ease 5s;
  -moz-animation: fadeIn ease 5s;
  -o-animation: fadeIn ease 5s;
  -ms-animation: fadeIn ease 5s;
}

Upvotes: 1

joseluismurillorios
joseluismurillorios

Reputation: 1014

I edited your code a little bit, let me explain what I've done:

First we need to start with zero opacity images till those are loaded, we can also add a delay transition based on the index of the image.

<Image
  pose={pose}
  {...props}
  style={{
    opacity: this.state.opacity,
    transition: "opacity 2s cubic-bezier(0.25,0.46,0.45,0.94)",
    transitionDelay: `${props.index * 0.5}s`
  }}
/>

We also need to add a setter function to change the opacity state via refs:

toggleOpacity = o => {
  this.setState({ opacity: o });
};

The tricky part was to track the images refs, this is how it looks, we also removed all keyframes since those are no longer necessary:

const Gallery = () => {
  const [isSelected, setIsSelected] = useState(null);
  const refs = {};

  let images = [];
  for (let i = 0; i < 10; i++) {
    refs[i] = useRef(null);
    let height = Math.floor(Math.random() * 400 + 400);
    let width = Math.floor(Math.random() * 400 + 400);
    images.push(
      <PicContainer index={i} key={i} selected={isSelected}>
        <ZoomImg
          src={`https://source.unsplash.com/random/${height}x${width}`}
          onLoad={() => {
            // Calling ref function
            refs[i].current.toggleOpacity(1);
          }}
          // Setting ref
          ref={refs[i]}
          index={i}
          setIsSelected={setIsSelected}
        />
      </PicContainer>
    );
  }

  return (
    <Mansory gap={"15em"} minWidth={600}>
      {images.map(image => image)}
    </Mansory>
  );
};

Here is the full example.

Upvotes: 1

Related Questions