With the release of Semplice 5.2, we've introduced brand new animations options in Semplice. It's now much easier to add motion to your page, build timeline animations and create custom effects.

 

Entering the Animations editor

The new Custom Animations editor has replaced the previous Semplice Motions feature. Now, to create or edit motions, simply click the Animations icon in the lower-left corner to enter Animations mode. 

Then simply click any element on the page to begin building out your custom animations.

Click on any element on the page to begin animating

 

Choosing a trigger type

When you first select an element to animate it, you have the choice of four options to serve as the trigger for your animations on the page: When in view, Mouseover, Click (Tap), and Scrolling in View.

 

 

Here is an explanation of each:

• When in view: The animation will trigger to play when the element comes into the viewport. 
• Mouseover: The animation will begin when the element is hovered.
• Click (Tap): The animation will start when the element is clicked on, tapped in the case of mobile devices.
• Scrolling into view: The element will animate on scroll, based on the scroll position in relation to the viewport. The stylings will revert when scrolled back up out of view.

Note: Once set, the Trigger type cannot be changed. To set a different trigger type, simply start over by using the Delete icon. You can always apply an existing preset to preserve previous animation stylings.

 

The Timeline

Custom animations are now based on a timeline, beginning with your initial state and followed by chronological steps.

This means it is now possible to create more dynamic animations with multiple steps. You can preview your animation timeline using the preview option. You can also loop your animation timeline or set a custom play-count.

 

 

Starting with premade presets

To get you started with animations, we've included premade animations (i.e. fading in, scaling, etc.) you can apply to any element. Simply click on an element you want to add a preset to, then click the Presets tab. From there, you can choose a premade animation from our list of presets.

Selected presets will automatically populate your animation timeline. You are then free to modify them as you please.

 

Presets are a fantastic way to quickly add animations to your page

 

Building custom animations 

Setting the Initial state

When you first create a new animation, your Timeline will automatically add an Initial State. Use this to define how your animation will appear from the start, before any other steps have been animated.

An example: Say you want to have an element fade and move in from the top. In this case, you would set the Initial State to an opacity value of 0 and the "Move Y" value to -50 or so. 

Setting the initial state

 

Adding steps

Once you have set the initial state for your animation, you can then begin adding steps to animate. You can add as many steps to your timeline as you like. You can preview each step individually, or view preview all the steps together in the timeline.

 

Adding steps to the timeline

Just click a step to show the customization options. In the step options, you can set things such as custom easing, delay, or duration for that individual step. Here's what those options mean:

 

Easing will define how your animation accelerates or de-accelerates. Easing can dramatically change the feel of your animation, and there are a variety of options included you can try.

Duration is the amount of time in milliseconds it will take for the animation step to complete.

Delay is the amount of time in milliseconds before your animation begins, when the step is triggered. For example: If you want an animation to wait a second before animating in on scroll, you can add a delay of 1000 on the first step in your timeline. 

 

Adding movements and effects

Styling your steps is essentially what creates your animation. You can add various effects, from movement, to scaling, color effects and more.

 

Adding a Hue-Rotate filter effect

 

For example, if your first step is set to scale at 100 with your initial state set to 0, the element will scale up to 100% from 0%.

 

Creating a scale in effect

To create a fade-in effect, set the initial opacity to 0. In the first step, have the opacity value set to 100.

 

Creating a fade in effect

 

Of course, you can add additional steps and build upon these as well. For example, to have an animation fade and scale in, pause, then rotate and fade out, we would do the following:

• Set the initial opacity and scale to 0
• Add a step with the opacity and scale to 100
• Add an additional step with a 360 rotate value and delay of 300
• Add a final step with the opacity set to 0

Note: Each step will maintain the stylings of the previous step, unless specified otherwise with an additional style value.

 

Previewing Animations

You can preview your animations to see how they look before publishing.

Step Preview allows you to preview each animation step individually.

Timeline Preview lets you preview all of the steps together in the Timeline.

Preview All (on the top right) allows you to preview ALL animations on your page together.

 

You can preview your individual steps, or the timeline as a whole

 

When using the Preview All feature, you will be able to preview all the animation triggers and interactions on the page. 

 

Previewing all animations will allow you to see your interactions from the editor

 

Using Custom Presets

A powerful new feature is the ability to save any of your custom animations as your own custom preset.

Just click the + icon in the lower right of your timeline to save a custom preset. You can then apply this saved preset to any element on your page, and your timeline will automatically populate with the steps contained within that preset.

 

You can use custom presets to quickly re-apply your favorite animations

 

Important: Custom presets by default are globally linked. This means that any changes in the Timeline will affect all instances of where that custom preset is being applied. If you wish to detach your Timeline and no longer make it global, simply click the green chain icon next to the preset name to detach.

 

 

Using the Scroll Settings

Scroll-based animations are a great way to make your page feel more interactive and dynamic. To create a scroll-based animation, use the "Scroll in View" trigger type.

 

You'll notice that the "Scroll in View" trigger has its own Scroll Settings editor. You can use this editor to define when your scroll animations will start and end. To adjust the positioning, simply drag the scroll markers to set the positioning for your scroll triggers.

The Scroll Settings allow you to adjust when and where your scroll animations begin and end

 

Your scroll animation will trigger when the Start Point meets the Start Trigger.  Similarly, the animation will end when the End Point meets the End Trigger. 

 

Creating a pinned or fixed scroll animation

You can now set an element to bixed or "pinned" on the page for a set duration, so it stays in place during scroll. You can use the "Pin Content" feature in the Scroll Settings to do this. Once this setting is enabled, you can set the Duration Value to define how long the elements stays pinned to the page.

 

Use the Pinned Content feature to fix elements to the browser

 

Let's say we want to have a text column pinned to the page for a short period as we scroll. To do this, we will set both the Initial and First Step Move values to 0 (the default). 

Important: Make sure you have a step created besides just the Initial Step. Otherwise, the pin effect will not work.

 

We would then turn on the Pin Content option, as well as the Pin Spacing. Pin Spacing will add additional space below the column as it's scrolled, and ensure it doesn't push into elements lower on the page. We then need to set a duration for how long we want the column to be pinned.

 

 

Once these conditions are all set, our text column will now be pinned on the page briefly as we scroll. You can then adjust the "Scroll Start" position to determine the exact position where you want the content to be pinned in relation to the viewport.

 

Note:  When using the Pin Content feature, ensure the Start Point is ABOVE the Start Trigger. Otherwise, the pinned effect will not get triggered.

 

Using Bulk Apply

You can use the Bulk Apply option to apply either a premade or custom preset to a group of elements on your page. For example, you can apply a "Fade In" preset to all the text modules on your page. Similarly, you could apply a custom preset to all of the images on your page. 

 

Resetting animations

Use the reset animations option to reset all animations on the page. Once reset, all animations will be removed from your page. 

 

Troubleshooting

Why are my scroll animations not triggering soon enough, or at all?

Ensure that the Start Point starts before the Start Trigger. Remember, the scroll animation will only begin animating when the Start Point meets the Start Trigger. You may need to adjust the Start Trigger to begin sooner on the page.

You can turn on the "Scroll Indicators" option to see exactly where your scroll triggers are placed when previewing your scroll animations.