Motion hover effect

With this tutorial, you can create a motion hover effect for your image layers.

1

Creating the slider and setting up the image

If you are creating this effect on a canvas-wide image, it's important to know how big the slider size is. Since you will use a portrait image, make the slider rather wide.

The image I'm using is 1080x1920px, so I set my slider size to be 1080x500px. Once your slider is done, create an Absolute image layer. Select your image and set its width to 100% and its height to auto at the Layer window → Style tab.

2

Positioning the image layer

The way this step goes is hardly depends on what is the starting point of your image. For this tutorial, my starting point will be the bottom of the image. Therefore, I'll align the layer to top-center and position it to x: 0 y: 0.

3

Incoming layer animation

The next step needed is setting up the layer animation. Select the "Top" predefined animation from Move group. It will set up a very close result. At the offset, you will see the default 400 value written.

If you remember, we set our slider's height to be 500, so this value is really low for us. My image size is 1920px, so I need the height to be 500px smaller than that. So let's set it to be 1420px. I also suggest changing the Easing to Linear.

4

Outgoing layer animation

Select the Fade animation, and change the offset to the same value as the incoming animation, just make it negative. If you changed the easing, change it here as well.

Turn on Repeatable for the layer animations.

5

Creating the event

Once your layer animations are set, go to the layer's Events tab to trigger the layer animations. The LayerMouseEnter event should trigger the Incoming animation, and the LayerMouseLeave should trigger the Outgoing.

That is it, the effect is ready.