Motion hover effect

☝️ Note: This tutorial is for Smart Slider 3 Pro version only!

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

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.

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 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.

☝️ Note: If you want the animation to happen slower, increase the Duration.
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.

☝️ Note: 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.

💡 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
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.