Articles in this section

See more

Creating animations with the Motion feature (Semplice 4)

  • Updated

This is a guide for Semplice 4. If you are using Semplice 5, please refer to this guide to create animations.

Animations bring your site to life, and with the motion feature you can easily create hover animations, on-scroll animations, loading animations and more from scratch.

You can add animations to a regular module, a column or a section. Follow this guide or watch the video to learn how.

 

Video overview

 

Enabling motion & activating animations

Step 1: Enable motion for your site

In Semplice, go to Customize -> Advanced. Scroll down and find 'Unlock Editor Motion options, and select 'Enabled."

animation.png

 

Step 2: Activate Animations in your Page or Project

Now go to a page or project you already created and in the editor pop-up, click the Motions tab and activate animations. 

 

motion2.png

 

Creating a basic motion

Step 1: Set events / triggers

First, decide how you want your animation to be triggered. You have 4 trigger options in Semplice:

On Load - Once your content is visible in the browser viewport (at start or while scrolling), the animation starts.

On Scroll - These are scroll-dependent animations. They appear while scrolling your page.

On Click - The animation appears when clicking your element.

On Mouseover - The animation appears when mousing over your element.

 

Step 2: Set Effects

Now decide what you want to happen when the animation is triggered. Choose from these effects:

Opacity - Your content opacity will change according to the trigger.

Scale - Your content will resize.

Move - Make your content move horizontally or vertically.

Rotate - Rotate your content in a specific angle.

Background color - Your content background color will change from Styles -> Background color to a new one.

 

Step 3: Fine-tune your motion 

Now customize your motion to achieve the desired effect by adjusting Delay, Duration, Start Point and more. Experiment with different animations by clicking 'Preview Animation,' or Save and Preview your page.

 

Now that you know how to use the Motion feature, you can make elements move or transform on hover, set elements to appear as your user scrolls, change an object on click and lots more. 

 

Related articles