Creating something spectacular and catching the visitors attention is a valid goal for each website owner. In most cases, these eye-candies are not really interactive. They usually happen when there is no user interaction at all, therefore the user just sits there when things happen in their browser. But that doesn’t mean those effects are bad.
Description: Animation offers the opportunity to surprise, making websites more enjoyable and engaging.
However, some people want more than that. They want their users to reach contents on their own, probably to monitor these events, to get feedback on what parts of their site were “worth making” and what parts are just “taking valuable space” and could be replaced with a better content. For example, you can place a beautifully designed banner to the left side of your site, while your menu and other important parts are on the right, the users probably won’t even notice the other content, let alone interact with it.
You might want to have a clean, simple slider but you want it to have more textual content. Let’s say, you have a slider that shows a simple image when the user doesn’t interact with it. But once their mouse reaches the slider (so you get their attention) additional information pops up for them to read.
The events are tightly bounded with the Layer animations, as in reality, the layer animations can be triggered via the events. If you check the second slide of our Company demo, and hover over each person, you’ll see their names, their position and contact info appearing, and all of them uses the set layer animation for that specific layer.
Smart Slider 3 offers a variety of very useful default events to handle situations when the user’s mouse enters or leaves the slider, the slide or event the layer itself, when the slider, slide or layer was clicked.
These events are perfect for creating simple events that are triggered when the user interacts with the slider or the slide. For example, you can show layers when the user hovers over the slide, and hide them again when their mouse leaves the area of the slide.
While the default events are awesome, they can’t really cover all use cases. For example, if you would like to tell your story only when the user clicks on a button or on an image, like the sample slider at the top of this page. In reality, you aren’t limited to use only our default events but you can create you own – better yet, you can create as many of them as you would like to. Any specific layer animation can be triggered by any number of events.
Custom event example
Let’s see an example on how to use the custom events. First, create a read more button, which, when clicked will show the text layer (in my example, the text layer reads “I’m a Wedding and Family Portrait Photographer based in Oslo.”) and hide it on the second click.
The first thing needed to do is to add a layer animation on the text layer. Then simply give a name to your event for both your IN and OUT animation, for example, readmore and readless, and make sure you remember these event names, as you’ll need them later.
When you’re done with the animations, then simply select your button layer, and at its onclick event, type your newly created events separated by comma but without space: readmore,readless.
The result can be tried in the live preview. It will look and work just like on your live site.
In our documentation, there are plenty of event tutorials which you can check out for additional ideas.
Have you ever wondered what would happen if you were able to rotate your images or buttons? Wonder no more, as you can achieve exactly this using the Special zero. When enabled, it will make the last animation step act like a “zero point”, making it possible to rotate or scale the layers.
- Layer animation