In this guide, we'll show you how to create a reveal animation on your page in just a few minutes, without custom code.

The reveal animation is a beautiful way to emphasize an image or section of your site. Use it to introduce new work, reveal the results of a project or create a unique scrolling experience on your homepage.

 

Please note: This feature is only available in Semplice 6.  If you're on an older version of Semplice, you can upgrade here.

 

Here’s what we’re going to build.

 

How to apply animation to an element

Step 1: Switch to animation editor

Click the "Animations" button in the bottom left corner of your page or project.

After that, select the element you want to apply the animation to.

 

Step 2: Choose element trigger

Select one of the options to choose what will trigger and start your animation.

• When in view: Animates when the element is visible on screen.
• Mouseover: Animates when you hover your element. (Disabled on mobile)
• Click (Tap): Animates when you click or tap your element.
• Scrolling in view: Animates while element scrolls through viewport.

For this guide I will use "When in view" option.

To learn more about custom animations visit this guide.

 

Configuring Reveal Animation

Step 3: Set initial state

Click "Initial State" and select "Reveal" option from the list to to define how your animation will appear from the start.

You will be presented with two reveal types from which you can choose: Rectangle and Circle

Rectangle type

By choosing this reveal type, you are creating a rectangular mask for your element. To animate this mask, you can move points: X1, X2, Y1, Y2.

• X1 - Top left corner
• X2 - Top right corner
• Y1 - Bottom right corner
• Y2 - Bottom left corner

Each point can be moved vertically and horizontally. The position is determined by how far the corner is from the side of the page.

If the horizontal value of the point is 0, then it will be on the left border. If the value is 100, it will be on the right border. The vertical value is also set between 0 and 100, where 0 is top and 100 is bottom.

An example:

Circle type

By choosing this reveal type, you are creating a circular mask for your element. In the reveal options, you can set properties, such as custom size and position. Here is how these options affect the mask:

Size can be between 0 and 100 where 100 makes the entire element visible and 0 makes it invisible.

Pos X is the horizontal position, where values from 0 to 100 move the mask from the left border to the right border.

Pos Y is the vertical position, where values from 0 to 100 move the mask from the top border to the bottom border.

An example:

Continue this tutorial 

Now you have learned all about the reveal animation. You can go and experiment on your own, or continue following this guide to create the rectangle reveal shown above. To do so, select the "rectangle type" and enter these values:

Step 4: Add reveal steps

In our example, the animated image first expands vertically and then continues horizontally.

To make this happen, first click the plus button to add a new step. Then click "Add Effect" and select "Reveal" from the list.

To learn more about animation steps, visit this guide.

After that, set the easing mode to "Power1.easeInOut" and enter the following values:

To read more about animation easing, check out this guide.

Then create another reveal step. Set easing mode to "Power1.easeInOut" and enter the following values:

Finally, you can preview the animation by clicking "Preview" button.

Step 5: Enjoy!

Now that you've learned how to use the reveal animation, it's time to create something beautiful!