Animations

In this chapter, you’ll learn how to make things move. We’ll look at the different types of animations you can apply to elements. We’ll also cover how to adjust the timings of animations, as well as the difference between the ‘timeline’ and ‘viewport’ animation types.

Animation types

Almost every group or element in Maglr can be animated. There are different types of animations to choose from:

• Start animations
  Play when a group or element comes into view.
• Repeating animations
  Play continuously, or for a set number of times, when the element is in view. Often used for attention grabbers.
• End animations
  Play when a group or element leaves the view.
• Scroll path animationsUsed to make elements follow a custom path while scrolling. Animation plays forwards while scrolling down, and backwards while scrolling up.

There are different animation options available, such as a fade, fade step, zoom, or rotate. Every animation option also has additional settings, such as a duration, direction, and easing.

Timeline

The timeline can be used to further adjust the timings of your animations. You can show or hide the timeline via the ‘Timeline’ button all the way in the bottom left of the editor.

The timeline has, by default, a maximum value of 10 seconds, and starts running as soon as your page is loaded up. Every element receives its own line, the far ends of which can be dragged to either add a delay or make the element disappear from view after a certain amount of time.

Animation triggers

By default animations are ‘timed’, meaning they start playing after a certain amount of seconds, defined by the value we set in the timeline.

However, when you have animations further down the page, it’s impossible to predict when your viewer reaches that point. Someone scanning the page might reach a certain point within 5 seconds, while another viewer might take 5 minutes to reach it.

That's where the 'viewport' animation trigger comes in. The 'viewport' is the visible area of a web page when it's viewed. So, only when a certain part of the page comes into view on your viewer's screen, the animation will trigger. 0% marks the bottom of the viewport, while 100% marks the top. So if you set the ‘start’ value in Maglr to 20%, the animation will play precisely when the element touches the 20% line of your viewer’s viewport.

Animating groups

For grouped elements, such as pop-ups, it’s possible to apply animations to entire groups. This causes all of the elements inside of that group to automatically be included in the animation. This is very handy, as everything stays flexible this way. If you remove an element from this group, or add a new one to it, you don’t have to manually adjust its animations to match.

On top of animating an entire group, it’s also possible to animate the elements inside of it independently. This allows you to combine animations and form unique creations.