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.
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."
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.
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.