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 theLayerMouseLeave
should trigger the Outgoing.
That is it, the effect is ready.
💡 Tips
If you want to create an opposite effect, which starts from bottom and goes to top, do the following changes:
- align the layer from bottom-center, x:0 and y:0
- the incoming animation's offset should be negative
- the outgoing animation's offset should be positive