Black Friday Super Sale! 🔥 Enjoy a jaw-dropping discount of up to 50% OFF on all Smart Slider plans. Hurry, before the offer ends on November 29th!

Buy Now

Introducing Reveal Animation

Ramona Nemeth-Csoka
Ramona Nemeth-Csoka
February 19, 2019
reveal animation

Creating eye-catching animations and getting the visitor’s attention is a challenging tasks. When most websites have the same couple of trendy effects, it’s hard to make yours stand out of the crowd. These cool, popular effects get boring soon when the visitor sees the hundredth text fade in. A new Smart Slider 3 version has just been released to come to your rescue.

What is a Reveal animation?

Reveal animation is an elegant and modern effect which is perfect to reveal images and texts as well. What makes it special is that it animates a single colored box in front of the actual layer. For instance, this box moves from left to right, and reveals the layer as it disappears on the right side. Reveal animation works on layers, columns or rows as well, so you can create spectacular effects from any content. Reveal animations are available to use as both incoming and outgoing animations. For the incoming animation, we have a couple of predefined effects to get you started.

Excited to use the new feature? Update your Smart Slider 3 to version 3.3.15.

The animations created in previous Smart Slider 3 releases will be moved to the new version automatically. You won’t lose the layer animations you’ve created before.

Reveal layer animation types

Using the Reveal animation, you can create spectacular effect to wow your visitors. To help you creating a truly unique effect, we added several cool animations you can choose from. You can select a “from” and a “to” effect at each animation. If you want something fancy but elegant, choose from the Slide type. Another cool type you can use is the Curtains type. These animations start from the sides of the layer and meet at its center. E.g. the Vertical starts from top and bottom and meet in the middle. Be sure to check them all to find your favorite!

Slide 1

Skew Left

Slide In with Crop

Circle Top

Rotate with Fade

Curtains without From

Slide with Scale

Real life Reveal animation examples

Every new Smart Slider 3 feature comes with inspiring example sliders. There’s no difference with the reveal animation either. To show the strength of the new effect and to inspire you, we’ve created a new landing page demo. This time we’ve chosen the medical theme for the next template slider. In the new template, we’re using the Reveal animation on many layers, including text, image and column. What’s the result? Check the demo and find out!

healthcare slider template
Healthcare Template

Oh, and by the way, we revamped some old templates to use the new effect. If you need more inspiration to use this new animation, be sure to check these reveal templates, too!

The new way to build a Slider
Next generation visual editor, customizable animations & effects, and access to hundreads of premade templates.
Get Started
Smart Slider 3 - The new way to build a Slider

Layer animation system improvements

To be able to create the Reveal animation, we had to make big changes in our animation system. For instance, we simplified the process of creating a new animation. We have also redesigned the animations tab of the layer window. Because of the changes we had to create version 3.3.15, this version is not backwards compatible.

New animation selector UI
New animation selector UI

There are another notable improvements this update brought. For instance, the Start and End delay, which you can use to create looping animation easily.


I’ve said it already, but I want to repeat it: the new update rocks! The Reveal animation is an amazing addition to Smart Slider 3. It’s a cool and modern effect, which will help you create more beautiful sliders than ever. The layer animation management took a huge step forward, to the right direction. The improved system also leaves room for other new effects in the future. So go ahead and update, but don’t forget: 3.3.15 is not backward compatible! But why would you want to go backwards anyway?

Ramona Nemeth-Csoka

About Author

Hi, I’m Ramona and I’m a member of Nextend‘s awesome support team. You’ve probably chat with me if you’ve submit a support ticket. When I’m not answering support emails I read a book or go cycling. I enjoy writing as well, both for our blog and for my private projects.