Layer animation - Motion hover effect

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. I went wit the default settings: 1200x500px. You could try this as well. Once your slider is done, create an image layer, select your image and at the layer's settings tab, set its width to 100% and its height to auto.

The image I'm using is 736x1309px. When it scales up to be 1200px wide, its height is increased to 2134px. This will be useful for a calculation later

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.

Incoming layer animation

The next step needed is setting up the layer animation. Select the " Top" predefined animation from the list. 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. At step one, I calculated the approximate height of my image to be 2134px, and we need this offset to be at least 500px smaller than this. So let's set it to be 1600px.

I also suggest changing the Easing to Linear.

If you want the animation to happen slower, increase the Duration.
Outgoing layer animation

The easiest way to start with the outgoing animation is selecting the predefined " Bottom" animation. Be sure to 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.

Then locate the More button, click on it, and find the "Layer global animation properties" at the bottom of the Animation manager. Turn off the Instant out and turn on the Repeatable.

If you increased the Duration at the previous step, you should do the same here. Be sure to use the same values at both places.
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.

If you want to create an opposite effect, which starts from bottom and goes to top, align the layer from bottom-center, and at the animation offset, change the negative value to positive and the positive value to negative.