Mission 7: Animate

Briefing

Animation can make your website more intricate, but when you overdo it it can become a mess. That is why the designer can decide what parts of the content should have animation effects (if any).

In this mission we are going to add an appear effect on the blockquote component we built in missions 1 to 3.

Step 1: Design Editor

Return to the design application by clicking the Design button when you log in to your project.

1 design button-3

Since our blockquote has been installed on the homepage we select to edit this layout.

2 select homepage

The design editor will open using the placeholder preview render and we are going to select Home to render the content of our actual homepage.

3 select Home render

Your screen should look something like this:

4 home render

Step 2: Appear effect

Scroll down until you see our blockquote with the quote: "Every accomplishment starts with the decision to try".

If you want all blockquotes to be animated click the dark green style button. If you only want to add animation to this blockquote we will need to create an instance. (for this example create an instance by clicking the light green button)

5 instance or select

The start panel for the blockquote instance should load.

At the bottom you will see the section Animation with two buttons Blockquote Animation and Blockquote Appear.

With animation you can add an animation to the blockquote when the page is loaded or when you hover over the blockquote. With appear the animation will start as soon as the visitor scrolls to the position of the blockquote and the blockquote appears on screen.

In this tutorial we are going to add an appear effect to our blockquote element.

Click the Blockquote Appear button.

6 animation start

The Appear option uses a javascript library scrollreveal.js where you can select one of the predefined effects from the list or program your own custom effect.

(1) Swith the select effect to on

(2) Select the Enter Right appear effect

(3) Click save

7 appear banner

Step 3: Result

You can see the result of the animation on the preview screen of the design editor.

You can also publish your website (see step 4 - mission 1). Scroll down to see the blockquote animate when he comes into the viewscreen.

appear

Debriefing

The animate and appear effect options in the design style panels are an easy way to put some live into your website. Feel free to experiment with both options.

We hope you enjoyed this tutorial. If you have any questions you can always contact us at support@sitemanager.io. If you like to learn more about the Design application you can always watch our Youtube playlist where we give you a full overview.

In the next tuturial mission we are going to add a new element to our layouts.