Events - Read more

Check out this documentation to understand how events work!

The tutorial is only for the pro version, as the events and layer animations are not available in the free version!

In this tutorial you can learn how to create a simple Read more button within the slider using Smart Slider 3's events. It can be useful if you would like to display short descriptions in your slider, but you would like to allow your users to read longer texts, too.

1
Preparations

The first things you will need for this tutorial is a layer with a long text, another layer which has a short version of that text (e.g. the first 2-3 sentences) and a read more button. Create these layers, add your content and customize the layers to fit your needs!

Align your two text layers below each other. The one with the shorter text should be above the other one. If you look at your layers, you'll see that where the text coming from the two text layers are covering each other, which doesn't look good.

So before we'd proceed to the animations, let's hide that unnecessary text from the long text layer. What you should do is to write some HTML codes around the text which appears on both layers, like this one:

<span style="color: transparent">[text which can be found on the short text layer, too]</span>[text on the long text layer only]
	
Make sure that the HTML code you inserted is valid and the tags are closed correctly, otherwise the slide will saved down badly causing issues in your site, and you might need to remove the whole slide to resolve the issues.

You might chain the two text layers together to be able to handle them easier later.

2
Creating the INCOMING animation

Select the layer with the long text and go to the Animations tab, and click on the ADD button at the IN animation. Select some predefined animation.

Locate the More button at the Layer window and click on it. Then scroll to the very bottom of the page, and locate the Layer global animation properties section. Give some event name, like bigin

And turn on the Repeatable option.

Before you would click on the apply button, add a new animation step, move it to be before all of your other animation steps. 

Then set its Duration to 1MS, leave the Delay on 0MS, the Opacity should be 0% and the Offset - x should be some large number, like 6000px. 

3
Creating the OUTGOING animation

This animation will be added to the long text, too, so select its layer if you have moved away, then go to the Animations tab, and add a new OUTGOING animation.Select some predefined animation. Then click on the More button.

Then scroll to the very bottom of the page, and locate the Layer global animation properties section. Give some event name, like bigout

Turn on the Repeatable option and turn off the Instant out.

Before you would click on the apply button, add a new animation step, and leave it to be the last animation step. Then set its Duration to 1MS, leave the Delay on 0MS, the Opacity should be 0% and the Offset - x should be some large number, like 6000px.

4
Creating the events

From the previous step, you have an IN event named bigin and an OUT event named bigout. Simply select the button layer, go to the Animations tab, click on the Show button after the events and write the two event name to the Click field separated with comma but without spaces, like this: bigin,bigout