Image Reveal

The effect itself comprises two layers: the first one being the cover, and the other one being the image itself.

Once the animation is triggered, the two layers are supposed to be revealed at different speed rates, giving the impression of uncovering. You can control the speed offset, and it’s up to you to make it more or less apparent.

Reveal direction

The Reveal effect allows you to unveil (or unhide) the Image element from the top, right, bottom, or the left-hand side.

Technically, the effect is the same, but the difference lies in the side from which the image is being revealed.

Direction offset

You can think of an offset as the element’s START position. The END position will always be the element’s default/initial position.

For instance, if you have chosen Reveal from left, with a Direction offset of 5vw, the element will automatically include the animation along the X-axis from -5vw to 0 (zero).

The negative starting value is based on the chosen Reveal direction. The left-hand side is considered negative, while the right-hand side is positive. By following the same logic, the top is also considered negative, and the bottom direction is positive.

Entering a negative value is not recommended because it will be suppressed and cancel out the offset!

Speed offset

It has been mentioned that the effect itself comprises two layers: the first one being the cover, and the other one being the image itself. The two layers are meant to be revealed at different speed rates.

The Speed offset determines how long it takes for the image to catch up with the cover, measured in seconds.

For instance, if you set the Speed offset to 0.1, it means that it’ll take 0.1 seconds for the image to catch up.

Fade in?

Should the element fade from 0 (zero) to 1 as well? If enabled, the effect will include the animation of opacity too. Please note that the opacity affects both the cover and the image!